回覆頁面加載後添加到文檔中的單擊事件

我正在編寫一個頁面，它使用jQuery for AJAX進行大量原位編輯和更新。回覆頁面加載後添加到文檔中的單擊事件

我來翻過這最好由工作流程如下所述概括了一個問題：在一個jQuery AJAX POST

數據的頁面結果

點擊「部件1」 JSON格式接收JSON格式
接收到的數據被用於在頁面
更新現有的元件「結果」接收
的數據的接收到的數據是實際的HTML表單
我想要的形式按鈕被點擊

，就會出現問題，當在點6的上方jQuery來負責張貼形式。我的代碼在我的主頁中，如下所示：

$(document).ready(function(){ 
    $('img#inserted_form_btn').click(function(){ 
    $.ajax({'type': 'POST', 'url': 'www.example.com', 'success': function($data){ 
     $(data.id).html($data.frm); 
    }), 'dataType': 'json'} 
    }); 
});

但是，該事件未被觸發。我認爲這是因爲當第一次加載文檔時，img＃inserted_form_btn元素在頁面上不存在（它被插入到DOM中，作爲頁面上單擊的元素的結果（未在上面的代碼中顯示 - 保持這個問題短期）

所以我的問題是：我如何才能讓jQuery來能夠對被添加到DOM的事件中的元素存在的響應後在頁面加載

來源

2010-05-12 morpheous

注意這個問題，其中有。對，.live，.delegate的一些討論和.click http://stackoverflow.com/questions/10983244/unsure-about-on-method/10983259#comment14346416_10983259 - 添加這個參考，以保持這個問題的網站/上下文 – 2012-06-13 12:30:22

使用現場處理？ ^{因爲一些時間棄用，檢查我的回答的第二部分，更好的解決方案！}

$('img#inserted_form_btn').live('click', function() { 
    // Your click() code 
});

假設圖像結合的情況下，當已經存在的一些元素的孩子，你可以使用一個委託代替：

$('#parent-element').on('click', '#inserted_form_btn', function() { 
    // Your click() code 
});

如果你沒有jQuery的1.7+：

$('#parent-element').delegate('#inserted_form_btn', 'click', function() { 
    // Your click() code 
});

在任何情況下，如果沒有合適的父元素，則可以使用代理並使用$(document)而不是$('#parent-element')。

來源

2010-05-12 14:52:31 ThiefMaster

+1，而文檔：http://api.jquery.com/live/ – Joel 2010-05-12 14:53:12

最好使用事件委託（.delegate（））。請參閱官方頁面上的解釋http://api.jquery.com/live/ – 2012-06-13 10:50:17

我不認爲在發佈此答案時存在此方法。 – ThiefMaster 2012-06-13 10:52:45

Live events是你在找什麼。

來源

2010-05-12 14:52:34

您需要可以指定點擊甚至在最初的AJAX調用後處理活動，即

$.ajax({ url: "test.html", context: document.body, success: function(){ 
    $('img#inserted_form_btn').click(function(){ 
     $.ajax({'type: 'POST', 'url': 'www.example.com', function($data){ 
      $(data.id).html($data.frm); 
     }), 'dataType': 'json'} 
    }); 
}});

或使用.live方法，以確保該事件被創建的DOM元素時被重新分配。

來源

2010-05-12 14:53:36 Lazarus

你可以使用實況（）結合的功能，符合選擇的所有要素，即使是那些在將來創建： http://api.jquery.com/live/

來源

2010-05-12 14:53:56 santiagozky

看1.4。2 .delegate()

的文檔是在這裏：Delegate

來源

2010-05-12 15:00:09

現場已被棄用，使用。對（）像這樣：

$('#table tbody').on('click', 'tr', function(e){ 
    var row = $(this).find('td:first').text(); 
    alert('You clicked ' + row); 
});

來源

2013-05-23 19:41:21 Ethereal

回覆頁面加載後添加到文檔中的單擊事件

回答

相關問題