不使用json添加的动态内容的javascript事件
不使用json添加的动态内容的javascript事件
提问于 2016-11-11 16:55:51
我遇到的情况是，我的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()之后调用它，但似乎没有什么效果。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-11-11 16:59:36
首先，您需要使用委托的事件处理程序来捕获动态附加元素上的事件。然后，您可以在成功处理程序函数中再次调用.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);
});
}); Stack Overflow用户
发布于 2016-11-11 17:00:04
不要直接在元素上调用on，而是在没有动态添加的父元素上调用它，然后使用可选的selector参数将其缩小到元素。
$('.parent').on('click', '.element', () => {
// do something
});两者之间的区别是：
$('.element').on('click', () => {});对于$('.element').on()，您只将侦听器应用于当前在该集合中的元素。如果在后面加起来，它就不会在那里了。
将其应用于$(.parent)，该父程序始终存在，然后将其过滤到所有其子节点，而不管何时添加它们。
Stack Overflow用户
发布于 2016-11-11 17:04:34
最简单的方法是在添加/生成DOM之后添加这个
$('script[src="site.js"]').remove();
$('head').append('<script src="site.js"></script>');当然，生成DOM的js函数需要在另一个文件上而不是site.js上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40552700
复制相关文章
相似问题
腾讯云开发者
