jQuery-单击事件绑定并在页面加载时启动

Question

Happy Friday errybody!

Alright, so I'm having trouble binding a 'click' event when a particular class of divs load.

What happens is that the 'click' event is being triggered on load. I've even tried unbinding before I bind.

onAppLoad = function() {
  console.log('span 4 loaded');

  hovering = function() {
    console.log('hovering!');
  }

  $.each($('.span4 > a'), function() {
    var whichApp = $(this).attr('data-content');

    $(this).unbind('click');
    $(this).bind('click', hovering());

  })   
}

$('.span4').load(onAppLoad());

Answer 1

You have a syntax error:

 $(this).bind('click', hovering());

Here you are calling the function hovering while what you want it to give the reference. Try this :

 $(this).bind('click', hovering);

Your .load() is wrong too (for the same reason).

$('.span4').load(onAppLoad);

Side note about the .each . When you are iterating a jquery object, you should write it like that :

$('.span4 > a').each(function() {})

Answer 2

Couple of things I see i your code:
1. You're missing a closing bracket for onAppLoad()
2. Change $(this).bind('click', hovering()); to $(this).bind('click', hovering);
3. Change $('.span4').load(onAppLoad()); to $('.span4').load(onAppLoad);

Out of curiosity, why not put all event handlers in a $(document).ready() event?