javascript事件无法使用json添加的动态内容
我遇到的情况是我的DOM元素是基于$.getJSON动态生成的，而且这些元素的Javascript函数不起作用。 我将在我的代码上发布一些一般性的想法，因为我正在寻找在这种情况下应该做什么的方向。
site.js包含一般function
$(document).ready(function() { $('.element').on('click', function() { $(this).toggleClass('active'); }); $(".slider").slider({ // some slider UI code... }); });
之后：
$.getJSON('json/questions.json', function (data) { // generating some DOM elements... });
我还尝试将所有site.js内容包装到函数refresh_scripts()并在$.getJSON()之后调用它，但似乎没有任何工作。
首先，您需要使用委托事件处理程序来捕获动态附加元素上的事件。 然后，您可以在成功处理程序函数中再次调用.slider()方法，以在新附加的内容上实例化插件。 试试这个：
$(document).ready(function(){ $('#parentElement').on('click', '.element', function() { $(this).toggleClass('active'); }); var sliderOptions = { /* slider options here */ }; $(".slider").slider(sliderOptions); $.getJSON('json/questions.json', function(data) { // generating some DOM elements... $('#parentElement .slider').slider(sliderOptions); }); });
不是直接在元素上调用，而是在未动态添加的父元素上调用它，然后使用可选的selector参数将其缩小到元素。
$('.parent').on('click', '.element', () => { // do something });
这和之间的区别：
$('.element').on('click', () => {});
使用$('.element').on() ，您只将侦听器应用于该集合中当前的元素。 如果它之后添加，它将不会存在。
将它应用于$(.parent) ，该父项始终存在，然后将其过滤到所有子项，无论它们何时被添加。
最简单的方法是在添加/生成DOM后添加它
$('script[src="site.js"]').remove(); $('head').append('');
当然，生成DOM的js函数需要位于另一个文件而不是site.js