Question

我遇到的情况是我的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()之后调用它，但似乎没有任何效果。

Answer 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);
    });
});

Answer 2

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

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

这与：和

之间的区别

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

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

将其应用于$(.parent)，父母一直在那里，然后将其过滤给所有孩子，无论他们何时被添加。

Answer 3

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

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

当然，生成DOM的js函数需要位于另一个文件而不是site.js

javascript事件无法使用json添加的动态内容

3 个答案: