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中不存在的元素仍然会导致回调触发。该过程称为event delegation。

Answer 2

我认为你应该使用live()

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

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

事件委派.live（）方法能够影响那些元素   尚未通过使用事件添加到DOM   委托：绑定到祖先元素的处理程序负责   在其后代上触发的事件。处理程序传递给   .live（）永远不会绑定到元素;相反，.live（）绑定一个特殊的   处理器到DOM树的根。在上面的例子中，当   单击新元素，将执行以下步骤：


生成点击事件并传递给处理。

没有处理程序直接绑定到，所以事件冒泡了   DOM树。

事件会一直冒泡，直到到达树的根部为止   是.live（）默认绑定其特殊处理程序。

由.live（）绑定的特殊点击处理程序执行。

此处理程序测试事件对象的目标以查看它是否存在   应该继续通过检查是否执行此测试   $（event.target）.closest（“。clickme”）能够找到匹配项   元件。

如果找到匹配的元素，则调用原始处理程序   它。


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

Answer 3

你需要使用Jquery live（）函数http://api.jquery.com/live/

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

     });

Answer 4

假设编辑/删除元素在#tabledata中，当您替换内容时，那些附加功能的原始编辑/删除元素不再存在。我会考虑使用jQuery.live，因为即使添加了带有.edit或.delete的新元素，它也能正常工作。

$('.delete').live('click', function(e) {
    var bid = this.class; 
    ...
    ...
});

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

4 个答案: