當我重新加載div的內容時，jquery不工作

通過jquery編輯刪除函數。當我第一次加載頁面時，一切正常。但是，當我重新加載div時，數據添加或編輯。然後，編輯和刪除功能不適用於新內容。當我重新加載div的內容時，jquery不工作

$('#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

來源

2011-09-01 abnab

您正在使用的.click(function() { })與當前在DOM中的元素相匹配，並將onclick處理程序綁定到它們。當您刪除這些元素或將其替換爲新元素時，onclick處理程序將丟失。選擇.delete的代碼已經運行，並且不會影響新創建的元素。

要設置一個處理程序，這將趕上單擊事件所有當前和未來元素匹配.delete，你需要使用.live：

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

這偵聽click事件冒泡並檢查其觸發元素與用於綁定.live回調的選擇器匹配。這樣，即使jQuery代碼運行時DOM中不存在的元素仍然會導致您的回調觸發。該過程被稱爲event delegation。

來源

2011-09-01 15:03:56 meagar

感謝堆!!完全合作......此腳本完全不工作在safari .. jquery的東西是不是在我的Safari瀏覽器根本不工作..任何線索？ – abnab

@Abhinab這不是一個有用的描述請提出另一個問題並提供更多詳細信息，這些意見不適用於其他問題/答案。 – meagar

我認爲你應該使用live()

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

使事件處理程序也被安裝到新創建的元素。這是因爲click（）處理程序僅適用於加載dom時已存在的元素，而live（）也適用於之後添加的元素。這是它是如何做（從文檔拍攝）

事件代表團.live（）方法能夠影響元素尚未通過使用事件代表團添加到DOM：處理程序綁定到祖先元素負責在其後代觸發的事件。處理程序傳遞給 .live（）永遠不會綁定到一個元素;相反，.live（）將特殊的處理程序綁定到DOM樹的根。在上面的示例中，點擊新元素時，將發生以下步驟：

生成單擊事件並將其傳遞給處理。

沒有處理程序是直接綁定的，所以事件冒泡 DOM樹。

事件冒泡直到它到達樹的根，其中是.live（）默認綁定其特殊處理程序的地方。

執行由.live（）綁定的特殊點擊處理程序。

此處理程序測試事件對象的目標，以查看它是否應該繼續。該測試通過檢查 $（event.target）.closest（「。clickme」）是否能夠找到匹配的元素來執行。

如果找到匹配的元素，則在上調用原始處理程序。

由於在事件發生之前不會執行步驟5中的測試，因此可以隨時添加元素並仍然響應事件。

來源

2011-09-01 15:03:23

你應該添加一些關於爲什麼他應該使用'live（）'和爲什麼'click（）'函數不適用於新創建的元素的信息。否則，它是正確的答案。只是不太有用的atm。 –

沒有什麼會「附加」到新創建的元素，這不是「活着」的工作方式 – meagar

我知道，我是在「metaforically」中說，只是爲了exaplain的東西，我會從文檔 –

你需要使用jQuery生活（）函數http://api.jquery.com/live/

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

    });

來源

2011-09-01 15:06:58

假設編輯/刪除元素#tabledata裏面，當你更換內容，那些原來編輯/刪除元素的功能是附着到不再存在。我會考慮使用jQuery.live，因爲即使添加了帶有.edit或.delete的新元素，它也可以工作。

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

來源

2011-09-01 15:08:17

當我重新加載div的內容時，jquery不工作

回答

相關問題