jQuery.click没有绑定使用jQuery添加的元素

Question

我有一个日历，我可以将事件添加到列表中。它的工作原理如下：

1. 我点击保存，数据使用jQuery.post
保存到数据库
2. 要刷新列表，我调用getList（），它返回一个事件的html列表
3. 我用新的列表替换现有列表。

问题是，在页面加载后添加了新元素，因此没有绑定。

我觉得我对如何使用jQuery bind或live感到有些困惑 这是我的代码：

// New event - Form Submit
jQuery('#formNewEvent').bind('submit',function() {

    var formData = jQuery('#formNewEvent').serializeArray();

    jQuery.post("/wp-content/plugins/wp-eventcal/eventcal_jquery.php", { instance: 'addNewEvent', formData : formData },
    function(data)
    {
      if(data == 1)
      {
        jQuery.post("/wp-content/plugins/wp-eventcal/eventcal_jquery.php", { instance: 'getEventList' },
        function(list) {
            jQuery('#eventList').html(list);  // List is updated here
        });
      }       
    });
  return false; //Must have this - otherwise the page just goes blank (at least for me)
}); 

我知道有类似的问题，但我无法找到正确的解决方案。

Answer 1

您只需使用live而不是绑定，以便新添加的元素也能正确绑定。

jQuery('#formNewEvent').live('submit',function() {

    var formData = jQuery('#formNewEvent').serializeArray();

    jQuery.post("/wp-content/plugins/wp-eventcal/eventcal_jquery.php", { instance: 'addNewEvent', formData : formData },
    function(data)
    {
      if(data == 1)
      {
        jQuery.post("/wp-content/plugins/wp-eventcal/eventcal_jquery.php", { instance: 'getEventList' },
        function(list) {
            jQuery('#eventList').html(list);  // List is updated here
        });
      }       
    });

});