如何将jquery Click事件应用于动态列表元素？

Question

我的当前设置加载在这一点我通过jQuery创建点击事件，像这样的动态列表：

$('#listReports li').click(function() { 
    var selected = $(this).text(); 
    alert("List Item: " + selected); 
}); 

我有代码，允许用户保存其被附加到列表的报告。在我再次调用函数之前，列表中的新项目不会触发单击事件。问题在于旧的项目事件被触发两次。

这是我如何追加我的列表项，并调用然后再次发挥作用：

  $("#save").click(function (e) { 

       if ($("#reportParams li").size()> 0) { 
        var fileName = $('#reportFileName').val(); 

        if (!fileName) { 
         alert("You must enter a file name!"); 
        } 
        else { 
         $('#listReports').append('<li><a href="#">'+fileName+'</a></li>'); 

         $('#listReports li').click(function() { 
          var selected = $(this).text(); 
          alert("List Item: " + selected); 
         }); 
        } 
       } 
      }); 

有没有办法只能定义一次点击事件并将其影响追加到列表中的新项目？

Answer 1

相反的.click()，使用.live()：

$('#listReports li').live('click', function() 
{ 
    var selected = $(this).text(); 
    alert("List Item: " + selected); 
}); 

或.delegate()：

$('#listReports').delegate('li', 'click', function() 
{ 
    var selected = $(this).text(); 
    alert("List Item: " + selected); 
});