button.click() does not work under IE11

Question

I have created a jqx menu with the following script:

<ul style='width: 200px;'>
    <li onclick="logOffButton.click();">Sign off</li>
</ul>

So I'd like to trigger a click event on the "logOffButton" once the user clicked to the menu item. The code for the button:

<form id="logOff" action="www.example.com" method="get">
    <input type="button" id="logOffButton" placeholder="Are you sure you want to log off?" onclick="UserConfirm(this)" style="display: none;" />
</form>

So once the button click is triggered, it creates an JS alert message and if the user press OK it submits the form.

The problem is that while this works fine under Chrome and Firefox, it doesn't work under IE11.

The full code can be found here: http://jsfiddle.net/82xhy/1/

Answer 1

try this:-

replace <li onclick="logOffButton.click();">Sign off</li> with

 <li onclick="$('#logOffButton').click();">Sign off</li>

Demo

Answer 2

Basically your code is wrong, and it works on chrome and other browsers because they try to understand what you mean. logOffButton.click() points to nothing, so ie being so bad and all does not understand what you mean. $('#logOffButton').click(); or document.getElementById('logOffButton'); will fix this problem because they both point exactly to where you need to, and don't require the browser to 'guess'

Both $('#logOffButton') and document.getElementById('logOffButton'); are element selectors, first is jquery and second one is javascript.