我想要實現
1.點擊#skillKey tr元素後程式碼顏色改變,
2.之後透過鍵盤輸入後改變目前元素的text,為了方便調試講步驟2省略為alert(123)
HTML程式碼如下:
<table id="skillKey"> <tbody> <tr>Q</tr> </tbody> <table>
JQuery程式碼如下:
$(function () { $('#skillKey').on('click', 'tr', function () { $(this).css('color','red'); $(this).keyup(function(){ alert(123) }); }); })
為什麼點擊後元素變色,而透過鍵盤輸入,無法alert?透過$(document).keyup()確實可以達到效果,想知道其中原因。有可能與keyup()要求綁定的元素類型有關?
另:一種錯誤的keyup()函數呼叫方法,若這樣寫:
$(function () { $('#skillKey').on('click', 'tr', function () { $(this).css('color','red'); $(this).keyup(alert(123)); }); })
那麼點擊tr後元素變色的同時會彈窗123,這是為什麼?
先指出你的一個錯誤點
$('#skillKey').on('click', 'tr', function () { $(this).css('color','red'); $(this).keyup(function(){ alert(123) }); });
你這樣綁定事件,結果是點擊一次tr綁定一次,點了多少次就綁定了多少次,這個例子還是不明顯,你在tr裡放置一個input,然後寫如下程式碼,看看效果如何
$('#skillKey').on('click', 'input', function () { $(this).css('color','red'); $(this).blur(function(){ alert(123) }); });
再給個建議
需要使用的元素可以先快取,不要濫用$,易讀的前提下可以使用鍊式
$('#skillKey').on('click', 'tr', function () { var $this = $(this); $this .css('color', 'red') .keyup(function () { alert(123) }); });
以上是jquery中keyup事件為什麼不執行?的詳細內容。更多資訊請關注PHP中文網其他相關文章!