JQuery 添加元素，包括删除侦听器

Posted 2023-05-09

【中文标题】JQuery 添加元素，包括删除侦听器

【英文标题】：JQuery adding elements including a remove listener

【发布时间】：2012-02-10 20:33:03

【问题描述】：

添加元素的最佳方式是什么？删除自己的链接，到 div？ 这几乎可以工作：

function displayElements(objekt) 
    $('#container').empty();
    for(var key in objekt) 
        if(objekt.hasOwnProperty(key)) 
            $('#container').append('<div id="' + key + '">' + 
                key +
                '<a id="del' + key + '">delete'</a></div>');
            $('#del' + key).click(function() 
                delete objekt[key];
                displayElements(objekt);
            );
        
    

奇怪的效果是，无论我点击哪个删除链接，总是最后一个元素被删除。 为什么会这样？有没有更优雅的方式来实现这一点？

问候，埃里克

【参考方案1】：

您可以将其替换为：

// build your markup
function displayElements(objekt) 
    var container = $('#container').empty();
    for (var key in objekt) 
        if (objekt.hasOwnProperty(key)) 
            container.append('<div id="' + key + '">' + key + '<a id="del' + key + '">delete< /a></div > ');
        
    



displayElements(objekt);

// bind to all anchors who's ids start with 'del'
$("#container").on("click", "a[id^='del']", function() 
    $(this).remove();
);

【讨论】：

谢谢 - 它工作得很好，而且这样更干净！ $(this).remove() 只删除了链接而不是 div。我使用了 $(this).parent().remove() 并完成了。再次感谢！

【参考方案2】：

我会将事件内容移出循环：

function displayElements(objekt) 
  $('#container').empty();

  for (var key in objekt) 
    if (objekt.hasOwnProperty(key)) 
      var $div = $('<div />');
      $div.prop('class', 'delete');
      $div.append($('<a />').attr('id', 'del' + key).text('delete'));
    
  


$('.delete').on('click', 'a[id^="del"]', function() 
  // Delete your stuff
);