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

时间:2012-01-15 15:36:04

标签: jquery dom element

添加元素的最佳方式是什么,包括删除自己的链接到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

2 个答案:

答案 0 :(得分: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();
});

答案 1 :(得分:0)

我会将事件移出循环:

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