jQuery的live和livequery當我通過ajax加載表單時不工作

我之前問過類似的問題How can I have jquery attach behavior to an element after inserting it，但是還是沒有找到答案。爲了保持清楚，我用另一個例子問了一個新問題。jQuery的live和livequery當我通過ajax加載表單時不工作

這是我的代碼不起作用。

$(document).ready(function() { 
$('form.edit_color').live('submit', function(){ 
    var form = $(this).closest('form'); 
    var colorRow = $(this).closest('tr'); 
    var action = $(form).attr('action'); 
    var formData = $(form).serialize(); 
    $(colorRow).fadeOut(); 
    $.post(action, formData, 
    function(data) { 
     $(form).replaceWith(data); 
     $(colorRow).fadeIn();   
    }); 
    return false; 
    }); 
});

這是什麼情況，對於我的每一個表單，我都可以通過ajax提交它們，並用更新的表單替換它。但是，當我點擊新的提交按鈕時沒有任何反應。

來源

2009-11-23 ToreyHeinz

我以爲livequery確實會處理提交事件，但是當我遇到問題時，我想我也只能活（）。

當我嘗試綁定到提交按鈕的單擊事件時，我也遇到了查找表單的問題。

當我檢查我在螢火蟲中的提交按鈕時，我意識到它沒有被顯示爲我的窗體的孩子。這讓我想到，如果螢火蟲無法弄清楚我的提交按鈕是我表單的子元素，那麼jQuery有什麼麻煩（也許W3C驗證器因爲某個原因而抱怨）。

因此，我嘗試了與上面相同的代碼，而不是使用div標籤內部的不同形式，而且它工作正常，所以我很快從表單中爲這個問題刪除了表格標籤，而且它的工作原理也很驚人。

我的解決方案將花費額外的時間來使我的html有效，並採取什麼是不應該工作，直到jQuery 1.3。3，http://docs.jquery.com/Release:jQuery_1.3.2。

下面是我目前的代碼，我需要弄清楚正確標記表單。。

$（ 'form.edit_color'）生活（ '提交'，函數（）{VAR 形式= $（本）; VAR colorRow = $（本）.closest（ 'div.color_form'）; 變種行動= $（形式）.attr（ '動作'）; VAR FORMDATA = $（形式）.serialize（）; $（colorRow）.fadeOut（）; $ .POST（動作，FORMDATA，功能（data）{ $（form）.replaceWith（data）; $（colorRow）.fadeIn（）;
}）; return false; }）;

<div class="color_form"> 
<% form_for color, :url => admin_color_path(color) do |f| -%> 
<div style="background: #<%= color.value %>"></div> 
    <div><%= f.text_field :title %></div> 
    <div><input type="text" size="30" name="color[value]" class="colorpickerfield" value="<%= color.value %>" /></div> 
    <div style="text-align:left"> 
    <% Color.types.each do |type, name| %> 
     <div> 
     <%= color_types_checkbox(color, type) %> 
     <%= name %> 
     </div> 
    <% end %> 
    </div> 
    <div> 
    <%= f.submit "Update", :class => 'submit' %> 
</div> 
<% end %> 
</div>

來源

2009-11-24 02:35:29 ToreyHeinz

如您在原始問題中回答，live根本不適用於submit事件。

請注意，您的回調函數中的$(colorRow).fadeIn();不可能正常工作，因爲它指的是發生時submit時窗體中存在的colorRow。但是您已經完全移除並用前面的replaceWith調用中的新調色板替換了該colorRow。替換後，form和colorRow變量不指向任何有用的東西。

live有點不符合事件如何在HTML中工作。儘量避免使用它。用新的標記替換大部分頁面通常是一個不好的舉措。如果您可以從JSON返回值更新表單中現有元素的內容，而不是傳回HTML的katamari：那麼您不必擔心重新綁定事件或保留對現在已死的DOM對象的引用。（如果你必須返回HTML，至少只返回表單內容，而不是表單標籤本身，那麼你可以使用html()來設置表單內容;通過不替換表單標籤本身，你不用不必擔心重新綁定其上的submit事件。）

來源

2009-11-24 00:34:57 bobince

但我不更換colorRow，只是裏面的表格，這是一個小型 – ToreyHeinz 2009-11-24 01:39:45

另外我只是實現了相同的代碼的其他地方和它的工作...我認爲不同的是，在這種情況下，我的表單不正確地包含了一些表格元素。 – ToreyHeinz 2009-11-24 01:42:56

啊，好的，很酷。是的，會發生這樣的情況：你不能在IE中的表中設置innerHTML，所以jQuery有一個解決方法，但是因爲它只會在你創建的元素是像'tr'或'tbody'這樣的表子元素時觸發。 jQuery假設你只會以HTML有效的方式嵌套，這可能夠公平。 – bobince 2009-11-24 18:12:22

要添加到bobince，live使用event delegation技術來「附加」事件。它的工作原理是，所有事件最終傳播到DOM中最高的父節點（window.document），因此如果僅附加一個事件處理程序來處理文檔，然後根據事件的原始目標運行不同的事件處理程序。

但是，有些事件不會傳播。 submit就是其中之一。所以你不能在那裏使用事件代表團。

來源

2009-11-24 00:44:51

$('form').live('submit', function(e) { 
    alert(e.type); 
    e.preventDefault(); 
}); 

$('form :submit').live('click', function(e) { 
    $(this.form).submit(); 
    e.preventDefault(); 
});

來源

2010-10-05 10:58:32

$('form.edit_color').live("submit", 
function(event){ 
event.preventDefault(); 
} 
);

試試這個。更多在：http://api.jquery.com/event.preventDefault/

乾杯， http://hiteshjoshi.com

來源

2011-05-29 02:22:13

jQuery的live和livequery當我通過ajax加載表單時不工作

回答

相關問題