2

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

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

4

2 回答 2

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). 所以jquery选择器函数在html中找不到这个元素，因为它不在这里。

此外，您的概念也不正确，因为您每次调用时都会在所有元素 .btn-add-textmyFunc上添加事件侦听器，这可能会使客户端 JavaScript 过载。仅将事件侦听器添加到您当前正在创建的元素。

于 2013-09-19T13:46:48.770 回答
1

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

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

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

Edit:

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

您的外部函数正在运行，因为它包含在 () 中，但内部函数没有。

于 2013-09-19T13:50:41.343 回答