点击另一个元素上的jQuery插件内的事件不起作用

时间:2013-09-19 13:40:47

标签: javascript jquery plugins event-handling onclicklistener

我在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");
  });
});

这对我也不适用。有没有解决这个问题的方法?

2 个答案:

答案 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元素。

你的外部函数正在运行,因为它被包含在()中,而内部函数却没有。