代码之家 › 专栏 › 技术社区 › ToreyHeinz

当通过Ajax加载表单时,jquery的live和livequery不适用于我。

livequery live ajax jquery javascript

ToreyHeinz · 技术社区 · 16 年前

我之前也问过类似的问题 How can I have jquery attach behavior to an element after inserting it 但仍然没有找到答案。为了让事情更清楚,我用一个不同的例子问了一个新问题。

这是我的代码,不起作用。

$(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提交它们,并用更新的表单替换它。但是,当我单击“新建提交”按钮时,什么也不会发生。

5 回复 | 直到 15 年前

Chetan S 16 年前

再加上波宾斯, live 使用 event delegation “附加”事件的技术。它的工作基础是所有事件最终传播到DOM中的最高父级。( window.document )因此,如果只向文档附加一个事件处理程序,然后基于事件的原始目标运行不同的事件处理程序。

但是,有些事件不会传播。 submit 是其中之一。所以不能在那里使用事件委托。

bobince 16 年前

正如你最初的问题所回答的, live 只是不适用于 submit 事件。

还要注意 $(colorRow).fadeIn(); 在回调函数中不可能工作,因为它引用的是窗体中当时存在的颜色行。 提交 发生。但是你已经完全去掉了,用前面的一个新颜色替换了那个颜色。 replaceWith 呼叫。更换后, form 和 colorRow 变量没有指向任何有用的东西。

居住 这是一个有点不太符合事件在HTML中的实际工作方式的黑客。尽量避免使用它。用新标记替换页面的大部分通常是一个错误的操作。如果您可以从JSON返回值更新表单中现有元素的内容,而不是返回HTML的katamari:那么您就不必担心重新绑定事件或保留对现在已死的DOM对象的引用。

(如果必须返回HTML,则至少只返回表单的内容,而不返回表单标记本身。然后你可以用 html() 设置表单内容;不替换表单标记本身,您不必担心重新绑定 提交 事件。

ToreyHeinz 16 年前

我认为LiveQuery确实可以处理提交事件,但是当我遇到这个问题时,我想我也只能使用live()。

当我试图绑定到“提交”按钮的单击事件时,我在查找表单时也遇到了问题。

当我在Firebug中查看提交按钮时,我意识到它不是作为我表单的孩子显示的。这让我想到,如果Firebug不能确定我的提交按钮是表单的子元素,那么jQuery会遇到什么样的问题(也许W3C验证器出于某种原因而抱怨)。

因此,我在DIV标记内的另一个表单上尝试了与上面相同的代码,但它起作用了,所以我很快就从表单中删除了这个问题的表标记,令人惊讶的是它也起作用了。

我的解决方案是花费额外的时间使我的HTML有效,并且在jquery 1.3.3之前使用那些不应该工作的代码, http://docs.jquery.com/Release:jQuery_1.3.2 .

下面是我当前的代码,我需要找出正确标记表单的方法。

$('form.edit_color').live('submit',function()。{ var形式=美元(本); var colorrow=$(this).closest('div.color_form'); var action=$(form.attr('action'); var formdata=$(form.serialize(); $(colorrow.fadeout(); .post(操作,表单数据, 功能(数据){ $(表单).replaceWith(数据); $(colorrow.fadein();
(}); 返回错误; (});

<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>

Hitesh Joshi 15 年前

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

试试这个。更多在: http://api.jquery.com/event.preventDefault/

干杯, http://hiteshjoshi.com

Alberto Zaccagni 15 年前

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

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