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