jquery，我的功能執行很多時間而不是一個

當我點擊.myClass我想'a'出現在＃消息之前，不幸的是'a a a'出現而不是它。jquery，我的功能執行很多時間而不是一個

我的CSS是：

#message{ 
    width: 80%; 
    height: 10%; 
    border-style:solid; 
    border-width:5px; 
} 


.hideIt{ 
    visibility:hidden; 
}

，我的代碼是：

<div id="message">test1 <span class="myClass hideIt">test2</span></div> 

    <script src="jquery.js"></script> 
    <script> 
    $(function() { 

     test = function() { $('#message').before('a '); } 

     $(document).on('mouseover', '#message', function() { 
      var el = $(this); 
      el2 = el.children('.myClass'); 
      el2.removeClass('hideIt'); 
      el2.on('click',test); 
      el.on('mouseout', function() { 
       el2.addClass('hideIt'); 
      }); 
     }); 

    }); 
    </script>

這裏小提琴鏈接：http://jsfiddle.net/TDJVw/

來源

2013-04-09 Gradislava Bikkulova

您正在註冊一個點擊處理程序，每次#message被徘徊。你需要.off（）那個點擊處理程序，或者把它放在mouseover處理程序之外（取決於你想完成什麼） – yoavmatchulsky 2013-04-09 07:48:50

@yoavmatchulsky是.off（）的正確語法：$（document）.off（ 'mouseout'，'#message'，test）; ?? – 2013-04-09 08:01:34

我已經更新了你的提琴：

http://jsfiddle.net/TDJVw/8/

$(document).on('mouseover', '#message', function() { 
    $(this).find('.myClass').removeClass('hideIt'); 
}).on('mouseout', '#message', function() { 
    $(this).find('.myClass').addClass('hideIt'); 
}) 

$('#message .myClass').on('click', test);

我感動mouseover處理

編輯之外click和mouseout事件處理程序：哎呀，我忘了補充#message到第二個.on（）

來源

2013-04-09 07:54:13 yoavmatchulsky

如果嘗試

test = function() { $('#message').html('a '); }

這將會把' a'a 'test1'的地方。這是你的要求嗎？

來源

2013-04-09 07:50:16 vinothini

這裏檢查這個小提琴http://jsfiddle.net/TDJVw/1/它會做你想做的。

您的問題是，您每次掛起div時都註冊了click方法。我在hover方法之外移動了click。

來源

2013-04-09 07:50:48

哦，我明白了，非常感謝 – 2013-04-09 07:56:13

您的代碼仍然會註冊多個'mouseout'處理程序，這些處理程序是冗餘的。你只需要一個 – yoavmatchulsky 2013-04-09 08:01:25

jquery，我的功能執行很多時間而不是一個

回答

相關問題