2

我之前问过一个类似的问题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 提交它们并用更新的表单替换它。但是，当我单击新的提交按钮时，什么也没有发生。

4

5 回答 5

1

要添加到 bobince，请live使用事件委托技术来“附加”事件。它的工作原理是所有事件最终都会传播到 DOM ( window.document) 中的最高父级，因此，如果您仅将单个事件处理程序附加到文档，然后根据事件的原始目标运行不同的事件处理程序。

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

于 2009-11-24T00:44:51.160 回答
0

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

另请注意 $(colorRow).fadeIn();，您的回调函数中的 不可能工作，因为它指的是发生时表单中存在的 colorRow submit。但是您已完全删除该 colorRow 并将其替换为前面replaceWith调用中的新颜色行。替换后，formandcolorRow变量不指向任何有用的东西。

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

（如果一定要传回HTML，至少只返回表单的内容，而不是表单标签本身。那么可以使用html()设置表单内容；不用替换表单标签本身，就不用担心了关于重新绑定submit事件就可以了。）

于 2009-11-24T00:34:57.130 回答
0

我在想 livequery 确实处理了提交事件，但是当我也遇到问题时，我想我也会 live() 。

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

当我在萤火虫中检查我的提交按钮时，我意识到它没有显示为我的表单的子项。这让我想到，如果 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) { $(form).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>
于 2009-11-24T02:35:29.017 回答
0 
$('form').live('submit', function(e) {
    alert(e.type);
    e.preventDefault();
});

$('form :submit').live('click', function(e) {
    $(this.form).submit();
    e.preventDefault();
});
于 2010-10-05T10:58:32.753 回答
0 
$('form.edit_color').live("submit",
function( event ){
event.preventDefault();
}
);

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

干杯， http://hiteshjoshi.com

于 2011-05-29T02:22:13.783 回答