javascript事件无法使用json添加的动态内容 [英] javascript events not working with dynamic content added with json

问题描述

我遇到的情况是我的DOM元素是基于 $。getJSON 动态生成的，并且这些元素的Javascript函数不起作用。我会在我的代码上发布一些一般性的想法，因为我正在寻找在这种情况下应该做些什么的方向。

I'm stuck with a situation where my DOM elements are generated dynamically based on $.getJSON and Javascript functions for this elements are not working. I'll post some general idea on my code because I'm looking just an direction of what should I do in this situation.

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（）之后调用它，但似乎没有任何工作。

I have also tried to wrap all site.js content into function refresh_scripts() and call it after $.getJSON() but nothing seems to be working.

推荐答案

首先，您需要使用委托事件处理程序来捕获动态附加元素上的事件。然后，您可以在成功处理程序函数中再次调用 .slider（）方法，以在新添加的内容上实例化插件。试试这个：

Firstly you need to use a delegated event handler to catch events on dynamically appended elements. Then you can call the .slider() method again within the success handler function to instantiate the plugin on the newly appended content. Try this:

$(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);
    });
});    

这篇关于javascript事件无法使用json添加的动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！