WordPress .clickまたは.onがfunction.phpからロードされているときに動作していません

Question

WordPressページのインラインスクリプトの前にこのスクリプトを使用していました。でも今はfunction.phpからロードしています。

それは動作しません、と.clickバージョンは動作しません。これは私の他のJavaScriptのスクリプトのため正常に動作しますが、.clickか.onは、このスクリプトは動作しません...

$("td.event-test").on("click", 
    function() { 
    $("p").empty(); 
    $(".event-title").empty(); 
    $(".event-title2").empty(); 
    $("<h1>EVENT #01</h1>").appendTo(".event-title"); 
    $("<p>Here is information for event!</p>").appendTo(".event-info"); 
    $("<p>more info for event</p>").appendTo(".more-event-info"); 
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link"); 
    $("a").attr("href", "events"); 
    } 
); 

$("td.event-test").click(
    function() { 
    $("p").empty(); 
    $(".event-title").empty(); 
    $(".event-title2").empty(); 
    $("<h1>EVENT #01</h1>").appendTo(".event-title"); 
    $("<p>Here is information for event!</p>").appendTo(".event-info"); 
    $("<p>more info for event</p>").appendTo(".more-event-info"); 
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link"); 
    $("a").attr("href", "events"); 
    } 
); 

JavaScriptスクリプトの最初の行からconsole.logに "test"文字列が表示されているので、スクリプトを読み込みます。

Answer 1

あなたはevent delegationを使用する必要があります。

$(document).on("click","td.event-test",function() { 
    $("p").empty(); 
    $(".event-title").empty(); 
    $(".event-title2").empty(); 
    $("<h1>EVENT #01</h1>").appendTo(".event-title"); 
    $("<p>Here is information for the event!</p>").appendTo(".event-info"); 
    $("<p>More info for the event</p>").appendTo(".more-event-info"); 
    $("<p><a>LINK TO THE EVENT SITE</p></a>").appendTo(".event-link"); 
    $("a").attr("href", "events"); 
}); 

注：私はOPのコードでon()を見たので、私は、この答えを追加したので、私はOPがon()が直接、動的に生成された要素のために働くことを考えていたことを考えましたこれは正しいことではありません。だから、私は両方のシナリオで動作するようにこのソリューションを追加しました。