HTMLが変更された後にJQuery $（これ）が認識されない

私はいくつかのhrefリンクとそれらのリンクを変更することができる2つのボタンからなるウェブサイトを持っています。

<div class="links"> 
    <p class="hlCategory">Classical Mechanics</p> 
     <ul> 
     <li><a class="topic_link" href="#">Position, Velocity, Acceleration</a></li> 
     <li><a class="topic_link" href="#">Newton's Laws</a></li> 
     <li><a class="topic_link" href=“#">Friction</a></li> 
     </ul> 
</div> 

<div class="buttons"> 
     <p>Choose Dificulty: 
     <button type=“button" onclick=“beginerButtonAction(this)">Beginer</button> 
     <button type=“button" onclick="intermediateButtonAction(this)">Intermediate</button> 
     </p> 
</div>

元のhtmlが読み込まれた後、リンクがクリックされると、javascriptファイルの警告機能がトリガーされます。

$(function(){ 
    $(".topic_link").click(function(){ 
    alert($(this).text()); 
    }); 
});

すべて正常です。

問題は、ボタンを押してhrefを変更した後に発生します。

function beginerButtonAction(id) { 
    $("div.links").remove(); 

    var newLinks; 

     newLinks= '<div class="links">'+ 
     '<p class="hlCategory">Classical Mechanics</p>'+ 
       '<ul>'+ 
       '<li><a class="topic_link" href=“#”>Moment of Inertia</a></li>'+ 
       '</ul>'+ 
      '<p class="hlCategory"></p>'+ 
       '<ul>'+ 
       '<li><a class="topic_link" href=“#">Drag Force</a></li>'+ 
        '</ul>'+ 
     '</div>'; 

    var $jNewLinks = $(newLinks); 
    $("body").append($jNewLinks); 
} 

function intermediateButtonAction(id) { 
    $("div.links").remove(); 

    var newLinks; 

     newLinks= '<div class="links">'+ 
     '<p class="hlCategory">Classical Mechanics</p>'+ 
       '<ul>'+ 
       '<li><a class="topic_link" href=“#”>Torque</a></li>'+ 
       '</ul>'+ 
      '<p class="hlCategory"></p>'+ 
       '<ul>'+ 
       '<li><a class="topic_link" href=“#">Momentum</a></li>'+ 
        '</ul>'+ 
     '</div>'; 

    var $jNewLinks = $(newLinks); 
    $("body").append($jNewLinks); 
}

htmlが変更されると、hrefはアラートをトリガーしなくなります。 htmlが変更されたら警告が鳴りたい。考えていますか？

出典

2016-05-08 Bryan Campbell

$（ "body"）を試してください。 "クリック"、 "。topic_link"、function（）{...}） ' –

素晴らしいです！ありがとう！ –

常に存在する親要素（この場合は<body>）にイベントをアタッチする必要があります。あなたはこのように新しい要素意志バブルアップのように委任し、イベントをトリガすることができます。

$('body').on('click', ".topic_link", function(){ 
    alert($(this).text()); 
});

はここon()とイベントの委任について詳しく読む：

http://api.jquery.com/on/#direct-and-delegated-events

出典

2016-05-08 17:21:16 billynoah

素晴らしい作品です！ありがとう！ –

$(selector).clickのみである要素にイベントを追加トリガーされたときにロードされた&がロードされました。そのセレクタに一致するすべての要素にclickイベントを追加する場合は、jquery.onメソッドが必要です。ここで

は一例です：

$(document).on("click", ".class", function() { 
    // do stuff 
});

あなたは、ドキュメントの代わりに他のセレクタを置くことができます。そして、jQueryはそれを見て、見つかった一致する要素（.class）のすべてにイベントを追加します。

例：

$("#myId").on("click", ".class", function() { 
    // do stuff 
}

これは、彼らがJS機能によって追加された場合でも、.classクラスを持つすべての要素にclickイベントを追加します。

出典

2016-05-08 17:26:20 aifrim

HTMLが変更された後にJQuery $（これ）が認識されない

答えて

関連する問題