click event not trigerred in IE

Question

I am trying to trigger a click event for a button from jquery. it works very well in FF but IE(all versions) seem to ignore it. this is what i have tried so far..

$('#uxcSubmit').trigger('click');

then tried this..

$('#uxcSubmit').click();

just to clear out..even this..

jquery('#uxcSubmit').click();

then even tried this to check if it is a problem of jquery..

document.getElementById('uxcSubmit').click();

nothing seems to help IE..

thanks in advance..

Update: this is the code.. and no i don't have elements of the same id..

<div id="uxcSavingDiv">Click sumbit to save changes...</div>
<input id="uxcSubmit" value="Submit" onclick="return SaveChange();"/>
<script type="text/javascript">
function getFrameValue() {
    if (Stage == 0) {
            $('#uxsHiddenField').attr("value", "saved");
            Stage = 1;
            $('#uxSubmit').click();
            return false;
    }
    else {
        $('#uxcSavingDiv').innerHTML = "Saving...";
        return true;
    }
}
</script>

i think i have been clear here

Answer 1

$("#uxcSubmit").closest("form").submit('SaveChange'); //let SaveChange() return true/false

... and remove inline 'onclick' attribute

Answer 2

The relevant code piece from jQuery should be this one

// Trigger an inline bound script
try {
    if ( !(elem && elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()]) ) {
        if ( elem[ "on" + type ] && elem[ "on" + type ].apply( elem, data ) === false ) {
            event.result = false;
        }
    }
    // prevent IE from throwing an error for some elements with some event types, see #3533
} catch (e) {}

So I guess either this has something to do with bug mentioned 3533 (which I can't check as dev.jquery.com is down at the moment) or there is some other IE bug. btw. do you get any warnings in the error console?

Answer 3

In the code you posted Stage is undefined, IE won't like this. Also $('#uxSubmit').click(); should be $('#uxcSubmit').click();. I also wasn't sure when you were calling getFrameValue(); but it must be done at or after document.ready or the elements won't be there to match selectors on.

I cleaned up the rest to use jQuery methods as well (leaving the in-line for demo, but I'd remove this as well and change it to a click handler), this works fine in IE8:

<div id="uxcSavingDiv">Click sumbit to save changes...</div>
<input id="uxcSubmit" value="submit" onclick="return SaveChange();"/>
<script type="text/javascript">
var Stage = 0;
function getFrameValue() {
    if (Stage == 0) {
            $('#uxsHiddenField').val("saved");
            Stage = 1;
            $('#uxcSubmit').click();
            return false;
    }
    else {
        $('#uxcSavingDiv').html("Saving...");
        return true;
    }
}
function SaveChange() {
  alert("Value clicked");
}
$(function(){
  getFrameValue(); //Trigger it on document.ready
});
</script>

To change that SaveChange() to a bound click handler, remove the onclick and do this on ready:

$('#uxcSubmit').click(SaveChange);