Question

I asked a similar question earlier How can I have jquery attach behavior to an element after inserting it, but still have not found an answer. To keep things clear I am asking a new question with a different example.

Here is my code that doesn’t work.

$(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;
  });
});

What happens is this, for each of my forms I can submit them through ajax and replace it with the updated form. But, then nothing happens when I click the new submit button.

Answer 1

I was thinking livequery did handle submit events, but when I was having problems with that as well, I figured I would just live() as well.

I was also having problems finding the form, when I tried to bind to the click event of the submit button.

As I was inspecting my submit button in firebug I realized the it was not being shown as a child of my form. That got me thinking that if firebug couldn’t figure out that my submit button was a child element of my form, what kind of trouble was jQuery having (and maybe the W3C validator was complaining for a reason).

So I tried the same code as above on a different form that I had inside a div tag instead, and it worked, so I quickly removed the table tags from form for this question and amazingly it worked too.

My solution will be to take the extra time to make my html valid, and to go with what is not suppose to work until jQuery 1.3.3, http://docs.jquery.com/Release:jQuery_1.3.2.

Below is my current code, I will need to figure out to properly markup the form.

$(‘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(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>