JQuery button click not working after ajax form su

Question

I am having some trouble getting a button clicked after submitting a form using JQuery ajax. Here is what my html looks like:

<div>
   <!-- normal HTML buttons that are overridden by JQuery for styling purposes -->
   <!-- Here, on render, the HTML button is hidden and a similar JQuery button is shown on       the DOM -->
</div>
<div>
    <!--- Stuff generated by a third-party tool --> 
</div>
<div>
    <!--- Our form loaded using JQuery --> 
</div>

The buttons mentioned above are actually put into the DOM by the third-party tool and on page render we take over them by hiding the buttons and producing JQuery buttons that then mimic the original buttons' behavior. So, basically, the user would fill in the 3rd party stuff in the form, fill our form and then click the JQuery button, upon which, we first submit our form to the server and then click the original button so that the 3rd party tool can submit it's own stuff. Here is the code for submitting our form:

clickoriginalbutton = function(passedButton)  {
    $(passedButton).click();

},
//save our data
submitourform = function(buttonreference) {
    $('#our_form').ajaxForm(options);

    $('*').button('disable');
    $('#our_form').ajaxSubmit({
        iframe: true,
        dataType: 'json',
        success: function(data){
            if (data.status == 'success') {
                         clickoriginalbutton (getOrigButton(buttonreference));
                };                                              
            }
        });
}

As you can see, the original button is clicked upon success of saving our form. The button click works fine in FF, but fails in IE. I can see that our form is submitted and the success comes back, but IE just does not fire the click of the original button. I have checked that all the references to the buttons are fine. I also searched in the forums here and found live/delegate etc., but not sure if they will work for me because our buttons are always there, they are not rendered via. ajax -- in fact, nothing is rendered via. ajax after the first load. So, not sure why the button click is not working on IE while it works on FF. Any ideas why this would be happening.

Thanks, Nitin

Answer 1

So it looks like in IE JQuery was not able to bind the click event to the original button. I changed clickoriginalbuttons code and used normal javascript click and it started working in IE. Now my code is like this: var origButton = document.getElementById($(daButton).attr("id")); origButton.click(); The problem is solved for now :)

Answer 2

Have you tried using jQuery's '.live()' function? You said the buttons are inserted into the DOM, therefore a click function won't work as the event will only get bound on page load. If you use .live() it binds the event for any DOM elements that exist already, and in the future.