jQuery: How to attach submit event in Firefox and Internet Explorer?

Question

I have the following handler in my page that works fine in Firefox, but apparently is not being attached in IE8, since it adds the parameters to the URL, and does not make any ajax calls the server:

$('#editBox form').live('submit',function(event){
        var daId = $('#editBox #id').val();

        $.post(
            '/edit.php',
            {
                company: $('#company',this).val(),
                name: $('#name',this).val(),
                email: $('#email',this).val(),
                id: daId 
            },
            function(response){
                sel = 'tr#' + daId;
                $(sel).html(response)
                .animate({backgroundColor: 'yellow'},500)
                .animate({backgroundColor: 'white'},500);

                $(sel + ' td:nth-child(3)').addClass('lastCell');

            });

            $('#editBox').hide('fast', function(){
                toggleHider();
                $(this).remove();
            });

            updateSorting();                

            consoleMessage('User changes saved');

        return false;
});

How can I make this work in both IE and FF?

Update

I'm still not able to get this working right. Using Joel's solution below, here's what I have:

function BindSubmit()
{
    $('#editBox form').unbind('submit').bind('submit', function() {
            var daId = $('#editBox #id').val();

            $.post(
                '/webadmin/CDAdmin/editrep.php',
                {
                    company: $('#company',this).val(),
                    name: $('#name',this).val(),
                    email: $('#email',this).val(),
                    id: daId 
                },
                function(response){
                    sel = 'tr#' + daId;
                    $(sel).html(response)
                    .animate({backgroundColor: 'yellow'},500)
                    .animate({backgroundColor: 'white'},500);

                    $(sel + ' td:nth-child(3)').addClass('lastCell');

                });

                $('#editBox').hide('fast', function(){
                    toggleHider();
                    $(this).remove();
                });

                updateSorting();                

                consoleMessage('User changes saved');

            return false;
    });
}

And here's how I'm trying to use it:

$tr.live('click',function(event){
        if ( $('#editBox').length ){
            $('#editBox').remove();
        }   

        var eb = $('<div>').attr('id','editBox');

        $('#startEditBox').children().clone(true).appendTo(eb);

        BindSubmit();

But it doesn't work. Now, the event isn't attached in either FF or IE.

Answer 1

live() is not supported on the submit event in JQuery 1.3.x. Try the JQuery 1.4 RC 1.

If upgrading is not an option, you will have to manually bind the submit event every time you add a form to the page.

E.g.

function BindSubmit()
{
    $('#editBox form').unbind('submit').bind('submit', function() {
        ...
    });
}

Then call BindSubmit() every time you add a form element to #editBox.

Answer 2

submit is not supported as a live event

from http://docs.jquery.com/Events/live#typefn

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

and

.live (currently) supports a subset of all events. Note the full list of supported/not-supported events above.

I had the same issue with $.live("change") It worked in FF, but not IE. I ended up using $.change().

I suggest using $.submit()

Bind the event whenever a new form is added to #editBox

$('#editBox form').submit(function(event){
  ..
});

Update

Make sure you add the editBox element to the Dom before trying to bind the submit event.

$tr.live('click',function(event){
  if ( $('#editBox').length ){
    $('#editBox').remove();
  }   

  var eb = $('<div>').attr('id','editBox');

  $('#startEditBox').children().clone(true).appendTo(eb);

  //add into the page somewhere
  $('#something').append(eb);

  //then bind the submit event
  BindSubmit();

Answer 3

I think this link might be help you.

http://groups.google.com/group/jquery-en/browse_thread/thread/4e6495e5c91cb596

http://www.pubbs.net/jquery/201001/23464/