脚本在以后加载的元素上不起作用是有原因的吗? [英] Is there a reason why a script doesn't work on elements loaded later on?

问题描述

我注意到在初始页面加载完成后，容器中的某些jQuery按钮在加载时不起作用.

I noticed that some jQuery buttons inside a container don't work when they are loaded after the initial page load has finished.

例如，请参见此

底部的那些按钮:今天，明天，其他日子 工作，但只在开始时.

Those buttons on the bottom: today, tomorrow, some other day work, but only at the beginning.

当您按下顶部的导航按钮(例如场地)，然后再次单击事件时，这些按钮将不再起作用. 搜索页面上的按钮也没有.

When you press a navigation button at the top, such as venues, and then click on events again, those buttons will no longer work. Neither do the buttons on the search page.

这是我的代码，例如:

<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');

});

谢谢大家！ :)

推荐答案

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

dynamically added elements needs to be re-binded to the events

使用 live 或 delegate

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

或 on (1.7 +)

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

这篇关于脚本在以后加载的元素上不起作用是有原因的吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！