javascript事件不适用于添加了json的动态内容

我遇到了这样一种情况：我的DOM元素是基于

$动态生成的。getJSON

和用于这些元素的Javascript函数不起作用。我将在我的代码上发布一些一般性的想法，因为我只是想知道在这种情况下应该怎么做

site.js

包含以下一般功能

$(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（）之后调用它，但似乎没有任何效果。
首先，您需要使用委托事件处理程序捕捉动态附加元素上的事件。然后，您可以在success handler函数中再次调用
.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);
    });
});    

不要直接在元素上调用
，而是在未动态添加的父元素上调用它，然后使用可选的
选择器
参数将其缩小到元素

$('.parent').on('click', '.element', () => {
    // do something
});

这与以下两者之间的区别：

$('.element').on('click', () => {});

是使用
$（'.element'）。在（）
上，您仅将侦听器应用于当前在该集中的元素。如果在后面加上，它就不会在那里了

将其应用于
$（.parent）
，该父级始终存在，然后将其过滤到所有子级，而不管它们是何时添加的。
最简单的方法是在添加/生成DOM后添加它

$('script[src="site.js"]').remove();
$('head').append('<script src="site.js"></script>');

$（'script[src=“site.js”]'）。删除（）；
$（'head'）。追加（''）；

当然，生成DOM的js函数需要位于站点以外的另一个文件中。js
更简单，只需使用
.unbind（）
methodMagic将滑块事件和单击事件放在success函数中即可。非常感谢Rory，非常感谢你的回答，编辑谢谢。它适用于单击元素，您提供了有关如何计划使用父元素生成元素的有用信息。