我在stackoverflow上发现了很多关于这个主题的文章,但没有人给我一个解决我确切问题的方法。
我有一个jQuery插件,到目前为止工作正常。在该插件中,我添加了一些新的DIVs
。另外,我想在这些新的DIVs
上添加一个点击事件监听器。像这样:
(function ($) {
$.fn.myFunc = function(options) {
// Options + Defaults
var settings = $.extend({
// Some options in here
}, options);
var controls = "\
<div class='controls'>\
<button class='btn-add-text'>Add Text</button>\
</div>\
";
$('.btn-add-text').click(function() {
alert("Test");
});
$(this).after(controls);
return this;
};
})(jQuery);
我的第一个想法是,这是不可能的,因为在新的div实际上在DOM内部之前调用了事件监听器,所以它无法工作。所以我移动了.click(func ...在插件代码之外的块,并把它放在document.ready函数中,如下所示:
$(document).ready(function() {
$('.btn-add-text').click(function() {
alert("Test");
});
});
这对我也不适用。有没有解决这个问题的方法?
答案 0 :(得分:2)
尝试使用更多变量来存储html(jquery)元素。
(function ($) {
$.fn.myFunc = function(options) {
// Options + Defaults
var settings = $.extend({
// Some options in here
}, options);
var button = $('<button class="btn-add-text">Add Text</button>');
button.click(function() {
alert("Test");
});
var controls = $('<div class="controls"></div>')
.append(button);
$(this).after(controls);
return this;
};
})(jQuery);
您使用$('.btn-add-text').click( ... )
,然后使用$(this).after(controls)
将此元素添加到html。所以jquery选择器函数在html中找不到这个元素,因为它不在这里。
此外,您的概念也不正确,因为每次调用myFunc
时都会在所有元素.btn-add-text 上添加事件监听器,这会使客户端javascript超载。仅将事件侦听器添加到当前正在创建的元素。
答案 1 :(得分:1)
要使其适用于新的DIV,您必须执行类似的操作 -
$('.controls .btn-add-text').click(function() {
alert("Test");
});
如果不起作用,请尝试禁用缓存并刷新。
<强> Edit:
忽略了一些东西。实际上你只是注册了内部函数(带有'options'参数)。你需要运行它来添加实际的div元素。
你的外部函数正在运行,因为它被包含在()中,而内部函数却没有。