1

要素をクリックしたときにトリガーされるイベントを取得できません。この要素は、td要素にカーソルを合わせた場合にのみ表示されます。

//Hovering over a td element displayed a Span
$('td').hover(
    function() {$(this).append('<span class="editCell">hello</span>')}, 
    function() {$(this).find('span:last').remove()}
)

//Clicking on that span, it's supposed to trigger alert. But it doesn't. 

$('.editCell').click( function(){

    alert('hello');
})
4

2 に答える 2

2

.click()イベントは動的に追加されたコンテンツでは機能しないためです。

代わりに.on（）を使用してください

$("td").on("click", ".editCell" ,function(){

});
  • 最初のパラメーターは、バインドするイベントです。
  • 2番目のパラメーターはセレクターです。セレクター内のすべての要素をフィルター処理し、イベントをそのセレクターにのみtdバインドします。click
  • 3番目のパラメーターは呼び出す関数です。

上記はと呼ばれdelegated-eventsます。

あなたもこのようにそれを行うことができます：

$(".editCell").on("click",function(){

});
于 2012-08-28T14:19:20.247 に答える
0

これは、editCellページの読み込み後に要素が追加されているためです。イベントを最も近い静的要素に委任する必要があります。これを試して：

$("td").on("click", ".editCell", function() {
    alert("hello");
});

tdセレクターはまだ少し広いですが、パフォーマンスのために、の最も近い親にIDを設定する必要がありますeditCell。

于 2012-08-28T14:10:49.217 に答える