javascript 事件不适用于使用 json 添加的动态内容答案

【问题标题】：javascript events not working with dynamic content added with jsonjavascript 事件不适用于使用 json 添加的动态内容
【发布时间】：2017-03-25 23:06:18
【问题描述】：

我遇到了这样一种情况，即我的 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函数中，使用.unbind()方法

标签： javascript jquery json dom

【解决方案1】：

首先，您需要使用委托事件处理程序来捕获动态附加元素上的事件。然后，您可以在成功处理函数中再次调用.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);
    });
});

【讨论】：

魔术。它有效:) 非常感谢罗里，非常感谢您的回答和编辑

【解决方案2】：

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

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

这和以下的区别：

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

与$('.element').on() 一起使用，您只是将侦听器应用于当前位于该集合中的元素。如果之后添加，则不会存在。

将其应用于$(.parent)，该父级始终存在，然后将其过滤到所有子级，无论何时添加。

【讨论】：

谢谢。它适用于点击元素，并且您提供了有关我应该如何计划使用父元素生成元素的有用信息。

【解决方案3】：

最简单的方法是在添加/生成 DOM 之后添加它

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

当然，您生成 DOM 的 js 函数需要位于您的 site.js 之外的另一个文件中

【讨论】：