jQuery's click() can trigger event handlers only for DOM 0 and event handlers registered through jQuery...?

Question

[Update:] This question is related to: what does jQuery's click() do?

http://stackoverflow.com/questions/3130539/jquerys-click-is-not-clicking

The following code:

  <div id="oneDiv">
    some content
  </div>

  <p>
    <a href="http://www.google.com" id="clickme">Click Me</a>
  </p>

        [ ... ]

  onload = function() { 

    $('#clickme').click(function() {
      $('#oneDiv').css({border: '6px dotted #07d'})
    });

    document.getElementById('clickme').onclick = function() {
      document.getElementById('oneDiv').style.color = 'green';
    }

    document.getElementById('clickme').addEventListener("click", function() {
      document.getElementById('oneDiv').style.background = '#ffc';
    }, false);  // bubbling phase


    setTimeout(function() {
      $('#clickme').click();
    }, 3000);

  }

If you click on the link, then the browser will

1) change border to 6px dotted blue
2) change text inside the div to be green
3) change background of div to offwhite
4) go to www.google.com

but if you wait and let the setTimeout()'s function to kick in, then it will only do the

$('#clickme').click(function() { })  
onclick = function() { ... }

it will not do the addEventListener one, and it will not follow the link. (IE 8 won't allow addEventListener by the way)

So is it true? jQuery's click(), which is the same as trigger('click') will only fire off event handlers registered through itself and the DOM level 0 event handler?

Answer 1

Hi,

jQuery is supposed to give you some help for selectors and events, but you mix it with straight javascript. I think it will be better to use jQuery format only so :

_replace

document.getElementById('clickme').onclick

by

$('#clickme').click(function {...});

_ replace

addEventListener("click"

_ by

live("click") or bind("click")

(see jQuery documentation for the difference).

_ Finally :

document.getElementById('oneDiv').style.background = '#ffc';

_ by

$('#oneDiv').css('background-color','#ffc');

also :

change onload by $(window).load(function() {....});

Tell us after if there is still a problem, but I advise you you read a good tutorial if you really want to get into jQuery and do powerful stuff ;)

Edit : This should definitely works :

$(window).load(function() {
            $('#clickme').click(function() {
            $('#oneDiv').css({border: '6px dotted #07d'});
            $('#oneDiv').css('color','green');
            $('#oneDiv').css('background-color','#ffc');})

            setTimeout(function() {
                $('#clickme').click();
            }, 3000);

});