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加载表单时不工作

回答

相关问题