3

私はjqueryの初心者で、jqueryでボックスを作成してから「削除」しています。しかし、同じコードを使用して、作成された要素のスコープと既に作成された要素のスコープでボックスを削除したいと考えています。

HTML:

<button id="create">Cria</button>
    <div id="main">
        <div class="box">
            <a class="del-btn" href="#">Delete</a>
        </div>
</div>

JS:

    var box = {

  create: function() {
      var box = $('<div class="box">');
      var delBtn = $('<a class="del-btn" href="#">Delete</a>');
      box.appendTo('#main');
      delBtn.appendTo(box);
  },

  destroy: function(elem) {
    elem.fadeOut();
  } 

}

function deleteBox () {

}

$(function() {

  $('#create').click(function() {
    box.create();
  });

  $('.del-btn').click(function() {
    var elem = $(this).parent();
    box.destroy(elem);  
    return false;
  });

});

create click イベント内に delete イベントを配置すると、動的に作成された要素を削除できます。外部に配置すると、HTML 内の要素を削除するだけで済みます。これが簡単な質問であることは知っていますが、解決方法がわかりません。ありがとう

4

1 に答える 1

7

デリゲート イベント アプローチを使用できます。

$("#main").on("click", ".del-btn", function() {
    var elem = $(this).parent();
    box.destroy(elem);  
    return false;
});
于 2012-09-21T20:24:00.230 に答える