Question

我早些时候提出过类似问题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提交它们并将其替换为更新后的表单。但是，当我点击新的提交按钮时没有任何反应。

Answer 1

要添加到bobince，live使用event delegation技术来“附加”事件。它的工作原理是所有事件最终都传播到DOM中的最高父级（window.document），因此如果只附加一个事件处理程序来记录，然后根据事件的原始目标运行不同的事件处理程序。 / p>

然而，某些事件不会传播。 submit就是其中之一。所以你不能在那里使用事件委托。

Answer 2

正如您在原始问题中所解答的那样，live根本不适用于submit事件。

另请注意，回调函数中的$(colorRow).fadeIn();无法正常工作，因为它指的是submit发生时表单中存在的colorRow。但是你已经完全删除并用前一个replaceWith调用中的新颜色替换了colorRow。替换后，form和colorRow变量并未指向任何有用的内容。

live有点像黑客，它与事件在HTML中的实际工作方式并不完全相关。尽量避免使用它。用新标记替换页面的大部分内容通常是一个糟糕的举动。如果您可以从JSON返回值更新表单中现有元素的内容，而不是传回HTML的katamari：那么您不必担心重新绑定事件或保留对现在已死的DOM对象的引用。

（如果你必须传回HTML，至少只返回表单的内容，而不是表单标签本身。然后你可以使用html()来设置表单内容;不要替换表单标签本身，您不必担心重新绑定submit事件。）

Answer 3

我认为livequery确实处理了提交事件，但当我遇到问题时，我想我也会生活（）。

当我尝试绑定到提交按钮的click事件时，我也遇到了查找表单的问题。

当我在萤火虫检查我的提交按钮时，我意识到它没有被显示为我的形式的孩子。这让我想到如果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 form = $（this）; var colorRow = $（this）.closest（'div.color_form'）; var action = $（form）.attr（'action'）; var formData = $（form）.serialize（）; $（colorRow）.fadeOut（）; $ .post（action，formData， function（data）{ $（形式）.replaceWith（数据）; $（colorRow）.fadeIn（）;
}）; 返回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>

Answer 4

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

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

Answer 5

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

试试这个。更多信息：http://api.jquery.com/event.preventDefault/

干杯， http://hiteshjoshi.com

当表单通过ajax加载时，jQuery的live和livequery对我不起作用

5 个答案: