提示循環，而不是在一個循環中

我最近開始學習jQuery，只是搞亂了我決定做一個RTE但是，我注意到當我去輸入一個超鏈接時，超鏈接已經被提示多次插入，並且似乎每次單擊超鏈接按鈕時都會增加。提示循環，而不是在一個循環中

$('#hyperlink').mouseover(function(){ 
     $('#hyperlink').css('color','#000000') 
     $('#hyperlink').mouseout(function(){ 
      $('#hyperlink').css('color','#999999') 
     }); 
     $('#hyperlink').click(function(){ 
      var url; 
      url = prompt('Enter the URL you wish to link:','http://'); 
      $('#contentArea').focus() 
      if(url != '' && url != null){ 
       $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>') 
      } 
     }); 
});

小提琴 - http://jsfiddle.net/vMFb9/

來源

2013-04-12 Chris Lee Faavesi

好的。（或者你打算問我們一個問題？） –

解除綁定事件或者在可能的情況下將其放在處理程序函數範圍外 –

從像鼠標懸停內拉點擊事件了：

$('#hyperlink').mouseover(function() { 
     $('#hyperlink').css('color', '#000000') 
     $('#hyperlink').mouseout(function() { 
      $('#hyperlink').css('color', '#999999') 
     }); 
    }); 
    $('#hyperlink').click(function() { 
     var url; 
     url = prompt('Enter the URL you wish to link:', 'http://'); 
     $('#contentArea').focus() 
     if (url != '' && url != null) { 
      $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>') 
     } 
    });

jsFiddle example

它被觸發，因爲在代碼中你把點擊事件的多次。

來源

2013-04-12 20:23:13 j08691

像魅力一樣工作謝謝！ –

鼠標事件處理程序是否應嵌套在鼠標懸停內？這是否會造成同樣的問題，但效果不明顯？ –

@KevinBowersox - 不，可能不是（儘管它似乎沒有引起任何問題）。 – j08691

您要添加單擊處理內鼠標懸停處理程序。

每當鼠標移動到元素（或其後代）時，就添加了另一個點擊處理程序。
當您單擊它時，所有這些處理程序依次運行。

這不是一個好主意。

來源

2013-04-12 20:22:50 SLaks

你必須keep'em分開！事件處理程序是。 mouseover事件處理程序在每次將它更新時都將新處理程序附加到超鏈接。

$('#hyperlink').mouseover(function(){ 
    $('#hyperlink').css('color','#000000') 
}); 

$('#hyperlink').mouseout(function(){ 
     $('#hyperlink').css('color','#999999') 
}); 

$('#hyperlink').click(function(){ 
    var url; 
    url = prompt('Enter the URL you wish to link:','http://'); 
    $('#contentArea').focus() 

    if(url != '' && url != null){ 
     $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>') 
    } 
});

來源

2013-04-12 20:24:19

你不應該巢鼠標移開或click鼠標懸停
內您應該使用mouseenter和mouseleave

您可以使用.on()將它們全部組合成一個！

$('#hyperlink').on({ 
    mouseenter:function(){ 
     $(this).css('color','#000000'); 
    }, 
    mouseleave:function(){ 
     $(this).css('color','#999999'); 
    }, 
    click:function(){ 
     var url = prompt('Enter the URL you wish to link:','http://'), 
      $contentArea = $('#contentArea'); 

     $contentArea.focus(); 
     if(!isEmpty(url)){ 
      $contentArea.append('<a href=\"' + url + '\">' + url + '</a>'); 
     } 
    } 
}); 

function isEmpty(str) { 
    return (!str || 0 === str.length); 
}

應該這樣做！將它們組合到一個單獨的.on()綁定中的原因是因爲每次操作DOM都不需要被刮掉。現在該項目只需要被發現一次，並且可以綁定所有事件。這是執行預期操作的最快方式。

編輯：更新了一個很酷的函數來檢查字符串是否爲空。

來源

2013-04-12 20:25:22 PlantTheIdea

感謝您的提示！ –

哈哈，爲了這個答案付出了很多努力，我爲時太晚而沒有得到任何承認。 – PlantTheIdea

重要的是：D我真的很感謝你！ –

作品太多，但不應該被使用，至少給你的想法，爲什麼它不工作：

SEE DEMO

$('#hyperlink').mouseover(function(){ 
       $('#hyperlink').css('color','#000000') 
       $('#hyperlink').off('mouseout').mouseout(function(){ 
        $('#hyperlink').css('color','#999999') 
       }); 
       $('#hyperlink').off('click').click(function(){ 
        var url; 
        url = prompt('Enter the URL you wish to link:','http://'); 
        $('#contentArea').focus() 
        if(url != '' && url != null){ 
         $('#contentArea').append('<a href=\"' + url + '\">' + url + '</a>') 
        } 
       }); 
     });

來源

2013-04-12 20:26:48

你應該從鼠標懸停功能分開

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

來源

2013-04-12 20:30:14 RicardoGonzales

提示循環，而不是在一個循環中

回答

相關問題