Question

我注意到容器内的一些jQuery按钮在初始页面加载完成后加载时不起作用。

底部的那些按钮：今天，明天，其他某天 工作，但只在开始时。

当您按顶部的导航按钮（例如场地），然后再次点击事件时，这些按钮将不再有效。搜索页面上的按钮也没有。

这是我的代码，例如：

<a id="today_button" href="#" title="Click to show events for today"></a>



jQuery('#today_button').click(function() {   
    jQuery("#today_button").addClass("active");
    jQuery("#tomorrow_button").removeClass("active");
    jQuery("#some_other_day_button").removeClass("active");
});

另外，选择按钮：

<a id="choose_button" href="#" title="Click to search for club events!"></a>

jQuery('#choose_button').click(function() {   

    $('#whole-ajax-content-one').load('search2.html');

});

谢谢大家！：）

Answer 1

您应该在document对象上使用委托来获取动态元素。试试这个

$(document).delegate('click', 'anyValidSelector', function(){

});

使用最新的jQuery ver 1.7+，您可以使用on将事件处理程序附加到任何元素，即使它是动态创建的。

查看http://api.jquery.com/on/

Answer 2

如果需要将事件附加到动态HTML元素，则应使用on事件处理程序。

如果您有以下内容：

jQuery('#choose_button').click(function() {

试试这个：

jQuery(document).on('click', '#choose_button', function() {

Answer 3

动态添加的元素需要重新绑定到事件

使用live (deprecated)

$('#choose_button').live('click', function() { ...  });

或delegate

$(document).delegate("#choose_button","click",function(){...});

或on（1.7 +）

$(document).on("click","#choose_button",function(){...});

是否有原因导致脚本无法在稍后加载的元素上运行？

3 个答案: