mouseover，mouseout，click事件处理程序未触发

Question

Here is the code -

setEvents:function(a, b){
    if(b) {
         $('#id').mouseover(function(){
            console.log('mouse over')
         })

         $('#id').mouseout(function(){
            console.log('mouseout')
         })

         $('#id').click(function(){
            console.log('click')
         })
    }
}

After this function is executed, I expect that the respective handlers will be fired on the events. But It is not happening. However, if I put aa dbugger in the method, and trigger the handlers after it has attached, it works. That is when I am inside the method it works. But It does not work once the method is executed.

Answer 1

You have to bind that function to an object, then there must be a call to the declared function in order to register the event handlers for the #id element:

• Define the method:

var handler = {
    setEvents:function(a, b){
        if(b) {
             $('#id').mouseover(function(){
                console.log('mouse over')
             })

             $('#id').mouseout(function(){
                console.log('mouseout')
             })

             $('#id').click(function(){
                console.log('click')
             })
        }
    }
}

• Call the method using the object reference and passing it your arguments:

handler.setEvents(a, b);

Here you can take a look to a complete Demo on JSFiddle .

Answer 2

Try this ... jsFiddle Demo

HTML (example):

<div id="id">lala (with #id)</div>
<br/>
<div>lele (without #id)</div>

JS:

var setEvents = function(a,b){
    if(b){
         $('#id').mouseover(function(){
            console.log('mouse over');
         });

         $('#id').mouseout(function(){
            console.log('mouseout');
         });

         $('#id').click(function(){
            console.log('click');
         });
        }
}

$(function(){
    setEvents(1,1);
});

Answer 3

You didn't post full code "how to call setEvents". But i think maybe you didn't call it when DOM is ready.

$( document ).ready(function() {
// Call setEvents

  });

Hope it'll help, if it doesn't work, please post more code