加载 AJAX 页面后调用 Javascript 函数答案

【问题标题】：Calling Javascript function after loading an AJAX page加载 AJAX 页面后调用 Javascript 函数
【发布时间】：2012-03-22 07:23:48
【问题描述】：

我不是程序员，所以如果我的问题没有多大意义，我深表歉意。

但基本上我有一个页面 index.php 有一组过滤器（按项目、年、月），在按下提交后将变量发送到 filterData.php 以在某些 SQL 语句中使用。

图像缩略图表形式的结果返回到 index.php 中的 div。我想要做的是拥有它，这样当用户单击图像时，边框颜色会改变以突出显示当前对象。

<script type="text/javascript">
$(document).ready(function () {
    $('.thumbnail_small').click(function(){
        $(this)
            .css('border-color','#000')
            .siblings()
            .css('border-color','#ccc');
    });
});
</script>

^ 那是我现在拥有的脚本，如果缩略图表被硬编码到 index.php 中，它就可以工作。一旦我通过 filterData.php 加载了表格，它就不再工作了。

这是什么原因，我该如何解决？

【问题讨论】：

标签： php javascript css ajax siblings

【解决方案1】：

一旦我通过 filterData.php 加载了表格，它就不起作用了没有了。

根据您使用的 jQuery 版本，使用 live 或更好的 on：

$('#mainContainer').on('click', '.thumbnail_small', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

或者

$('.thumbnail_small').live('click', function(){
    $(this)
        .css('border-color','#000')
        .siblings()
        .css('border-color','#ccc');
});

对于稍后或动态添加的元素，您必须使用live 或on。

【讨论】：

#mainContainer 是父 div 吗？我正在使用 Jquery 1.3，这就是我将其更改为但它仍然无法正常工作：
@user1067577：是的，你应该有一个 id 的容器，例如id="mainContainer"，你可以更改它的名称或使用现有的名称。或者您可以在我的回答中简单地使用第二个示例。
你太棒了！！非常感谢：）我使用了第二个例子。