javascript - jQuery 插件内的单击事件在另一个元素上不起作用

Question

我在 stackoverflow 上找到了很多有关此主题的文章，但没有人针对我的具体问题提供解决方案。

我有一个 jQuery 插件，到目前为止运行良好。在该插件中，我添加了一些新的 DIV。另外，我想在这些新的 DIV 上添加一个点击事件监听器。像这样:

(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... block 移到插件代码之外，并将其放入 document.ready 函数中，如下所示:

$(document).ready(function() {
  $('.btn-add-text').click(function() {
    alert("Test");
  });
});

这对我来说也不起作用。这个问题有什么解决办法吗？

Answer 1

尝试使用更多变量来存储 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 过载。仅将事件监听器添加到您当前正在创建的元素。