誰かが私のjqueryクリックハンドラが動作を停止する理由を説明できますか？

Question

iframe内で読み込まれるHTMLページ内の$（document）.ready（）呼び出しの中にjqueryコードがあり、テーブルエントリを削除する同じページから別の関数が呼び出されるまで正しく動作します。その後、テーブルはまだ同じページ内にリロードされますが、今はクリックハンドラがテーブル行を選択して強調表示します。

このコードは、その行で実行する関数のテーブルの行を強調表示します（この場合、行を削除するときにのみ問題が発生します。これは、ページをリダイレクトしない

ウィンドウの初期ロード時に、クリックハンドラーが正しく機能し、必要な行を強調表示または強調表示しません。しかし、私が行を削除する関数を使用するときは、問題が発生します。ここでハイライト機能のためのコードは次のとおりです。

$("tr[id*='report']").on("click",function(){ 
    if(!$(this).hasClass("highlighted")){ 
     $("#reports tr").removeClass("highlighted"); 
     $(this).addClass("highlighted"); 
    } 
    else{ 
     $(this).removeClass("highlighted"); 
    } 
}); 

行は親のWebページからの関数呼び出しを使用して除去した後、ページはしてテーブルを再作成するには、最初の場所でテーブルを作成するために使用したのと同じ関数を呼び出し新しい行が表示されますが、強調表示のクリックハンドラは機能しません。しかし、削除、編集、または追加ボタン用の他のクリックハンドラーは引き続き機能します。

これは、編集ボタンを使用して選択したレポートを編集するハンドラで、同じ$（document）.ready（）関数の中でハイライト関数呼び出しのすぐ下にあります。

$("#edit").click(function(){ 
    if($("tr").hasClass("highlighted")) 
    { 
     openReport(helper); 
    } 
    else 
    { 
     alert("Please select a report to edit"); 
    } 
}); 

このボタンのリスナーは引き続き動作しますが、同じスコープ内のハイライト機能は動作しません。また、強調表示のリスナーは、クロムの開発ツールのイベントリスナーセクションに一覧表示されます。

これは、私の一部の準備機能内でスコープの問題が発生したのか、何か不足しているのかどうかはわかりません。 すべてのアイデアや解決策が素晴らしいでしょう。

さらに詳しい情報が必要な場合は、私に知らせてください。

Answer 1

読書：別の関数は、テーブルのエントリを削除し、同じページから呼び出され

...まで。その後、テーブルはまだ同じページ内にリロードされますが、今はクリックハンドラがテーブル行を選択して強調表示します。

あなたの問題はevent-binding-on-dynamically-created-elementsです。

だから私はあなたに機能を変更することをお勧め：ライブサイトへのリンクや、この問題が複製されjsfiddleを持つことが有益であると思います

$(document).on("click", "tr[id*='report']", function(e) { 
    if(!$(this).hasClass("highlighted")){ 
     $("#reports tr").removeClass("highlighted"); 
     $(this).addClass("highlighted"); 
    } 
    else{ 
     $(this).removeClass("highlighted"); 
    } 
});