当我重新加载div的内容时,jquery无法正常工作

Question

编辑通过jquery创建的删除功能.当我第一次加载页面时,一切正常.但是当我在添加或编辑数据时重新加载div时.然后编辑和删除功能不适用于新内容.

 $('#add').submit(function() {          
            $.ajax({
               type: "POST",
               url: "addedit.php",
               data: "name="+$('#name').val()+"&address1="+$('#address1').val()+"&address2="+$('#address2').val()+"&suburb="+$('#suburb').val()+"&state="+$('#state').val()+                                                 "&postcode="+$('#postcode').val()+"&customerid="+$('#customerid').val(),
               success: function(msg){
                 //clearing form after adding
                 $( "form" )[ 0 ].reset();

                  $('#tabledata').load('load.php'); 
                  alert("Sucessfully Added/Edited.")
                  }
             });
          //$('#tabledata').html('asd');

          return false;
        });

            //function to chuck customer data into the form to edit
            $('.edit').click(function(e) {
             var bid = this.class; 
             var customerid = $(this).closest('tr').attr('id'); // table row ID in which customer id has been stored
             $.ajax({
               type: "POST",
               url: "getedit.php",
               data: "id="+customerid,
               success: function(msg){

                  var partsArray = msg.split('||');
                  //adding form with customer data to edit
                  $("#name").val(partsArray[0]);
                  $("#address1").val(partsArray[1]);
                  $("#address2").val(partsArray[2]);
                  $("#suburb").val(partsArray[3]);
                  $("#state").val(partsArray[4]);
                  $("#postcode").val(partsArray[5]);
                  $("#customerid").val(customerid);


               }
             });    //end of $.ajax       
        }); //end of edit click


        //function to delete the customer data
        $('.delete').click(function(e) {
             var bid = this.class; 
             var customerid = $(this).closest('tr').attr('id'); // table row ID in which customer id has been stored

                $.ajax({
               type: "POST",
               url: "delete.php",
               data: "id="+customerid+"",
               success: function(msg){
                 // $('#'+customerid).css({backgroundColor: 'red'});
                  $('#'+customerid).remove();
                  //alert("Sucessfully Deleted.")
                 // $('#tabledata').load('load.php');       
                  }
             });//end of $ajax                
        }); //end of delete click

Answer 1

您正在使用.click(function () { })哪个匹配DOM中当前的元素并将onclick处理程序绑定到它们.删除这些元素或用新元素替换它们时,onclick处理程序将丢失.选择的代码.delete已经运行,并且不能影响新创建的元素.

要设置一个处理程序,它将捕获所有当前和未来元素匹配的单击事件.delete,您需要使用.live:

$('.delete').live('click', function(e) {
  // ...
});

这会侦听click事件冒泡并检查其触发元素是否与用于绑定.live回调的选择器匹配.这样,即使运行jQuery代码时DOM中不存在的元素仍然会导致回调触发.该过程称为事件委派.

Answer 2

我认为你应该使用live()

$('.delete').live('click', function(

这样事件处理程序也附加到新创建的元素.这是因为click()处理程序仅适用于加载dom时已存在的元素,而live()也适用于之后添加的元素.这就是它的完成方式(取自文档)

事件委派.live()方法能够通过使用事件委托来影响尚未添加到DOM的元素:绑定到祖先元素的处理程序负责在其后代上触发的事件.传递给.live()的处理程序永远不会绑定到元素; 相反,.live()将特殊处理程序绑定到DOM树的根.在上面的示例中,单击新元素时,将执行以下步骤:

• 生成单击事件并将其传递给for处理.
• 没有处理程序直接绑定到,所以事件冒泡DOM树.
• 事件会一直冒泡,直到它到达树的根,这是默认情况下.live()绑定其特殊处理程序的地方.
• 由.live()绑定的特殊单击处理程序执行.
• 此处理程序测试事件对象的目标以查看它是否应该继续.通过检查$(event.target).closest(".clickme")是否能够找到匹配的元素来执行此测试.
• 如果找到匹配的元素,则在其上调用原始处理程序.

因为在事件发生之前不执行步骤5中的测试,所以可以随时添加元素并仍然响应事件.