2

このトピックに関する多くの記事をstackoverflowで見つけましたが、正確な問題の解決策を誰も教えてくれませんでした.

これまでのところ正常に動作するjQueryプラグインがあります。そのプラグインで、新しいDIVs. また、これらの new にクリック イベント リスナーを追加したいと考えています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( ... )して、この要素を html に追加し$(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:

何かを見落とした。実際には、内部関数を登録しているだけです（「オプション」パラメーターを使用）。実際の div 要素を追加するには、実行する必要があります。

外側の関数は () で囲まれているため実行されていますが、内側の関数はそうではありません。

于 2013-09-19T13:50:41.343 に答える