jQuery: How to attach submit event in Firefox and Internet Explorer?
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 开发者_JAVA百科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.
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();
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
.
精彩评论