另一个元素上的jQuery插件内的Click Event不起作用

Question

我在stackoverflow上找到了许多有关此主题的文章，但是没有人给我确切的问题的解决方案。

我有一个到目前为止效果良好的jQuery插件。 在该插件中，我添加了一些新的DIVs 。 我也想在这些新的DIVs上添加一个click事件监听器。 像这样：

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

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

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过载。 仅将事件侦听器添加到当前正在创建的元素。

Answer 2

要使其适用于新的DIV，您必须执行以下操作-

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

如果不起作用，请尝试禁用缓存并刷新。

Edit:

被忽略的东西。 实际上，您只是在注册内部函数（使用'options'参数）。 您需要运行它以添加实际的div元素。

您的外部函数正在运行，因为它包含在（）中，而内部函数未在内部。