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

Question

什么是添加元素的最佳方式，一个链接去除自己，一个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); 
      }); 
     } 
    } 
} 

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

问候，Eriq

Answer 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(); 
}); 

Answer 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 
});