Javascript 单击另一个元素上jQuery插件内部的事件'；行不通

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

---

这对我也不管用。这个问题有什么解决方案吗？

尝试使用更多变量来存储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);

（函数（$）{
$.fn.myFunc=函数（选项）{
//选项+默认值
变量设置=$.extend({
//这里有一些选择
}，选项）；
var按钮=$（“添加文本”）；
按钮。单击（函数（）{
警报（“测试”）；
});
变量控制=$（''）
.附加（按钮）；
$（此）.after（控制）；
归还这个；
};
})（jQuery）；

使用

$（'.btn add text'）。单击（…）

，然后使用

$（this）.在（控件）

之后将此元素添加到html中。所以jquery选择器函数在html中找不到这个元素，因为它不在这里

---

此外，您的概念也不正确，因为您在所有元素上添加了事件侦听器。btn每次调用

myFunc

时都添加文本，这会使客户端javascript过载。仅向当前正在创建的元素添加事件侦听器

要想让它在新的div中发挥作用，你必须做如下的事情-

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

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

编辑：

忽略了一些事情。实际上，您只是在注册内部函数（使用“options”参数）。您需要运行它来添加实际的div元素

---

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

我做了小编辑。你的问题很正常。首先在html中插入元素，然后调用选择器，选择器可以添加监听器或将dom/jquery元素保存到变量中，然后在其上添加监听器，然后插入html。谢谢！很好用！

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