JQuery $ (this) nicht erkannt, nachdem HTML geändert wurde

Ich habe eine Website bestehend aus ein paar href Links und 2 Buttons, die ändern können, was diese Links sind.

<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>

Nach dem ursprünglichen HTML geladen wird, wenn Links angeklickt werden, wird die Alarm-Funktion in der JavaScript-Datei ausgelöst.

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

Und alles funktioniert gut.

Das Problem tritt auf, nachdem die Tasten gedrückt und die href geändert wurden.

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); 
}

Nachdem der HTML-Code geändert wurde, löst die href die Warnung nicht mehr aus. Ich möchte, dass der Alarm ausgelöst wird, nachdem HTML geändert wurde. Irgendwelche Gedanken?

Quelle

2016-05-08 Bryan Campbell

Probieren Sie '$ (" body "). On (" klick ",". Topic_link ", function() {...})' –

Funktioniert gut! Vielen Dank! –

Sie müssen das Ereignis an ein übergeordnetes Element anhängen, das immer vorhanden ist - in diesem Fall <body>. Sie können wie diese so neue Elemente sprudeln delegieren und das Ereignis auslösen:

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

Lesen Sie mehr über Veranstaltungen mit on() hier Delegieren:

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

Quelle

2016-05-08 17:21:16 billynoah

Funktioniert gut! Vielen Dank! –

$(selector).click nur fügt Ereignisse auf die Elemente, die geladen & gerendert, wenn es ausgelöst wird. Wenn Sie allen Elementen, die mit diesem Selektor übereinstimmen, click-Ereignisse hinzufügen möchten, benötigen Sie die Methode jquery.on. Hier

ein Beispiel:

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

Sie an der Stelle des Dokuments andere Wähler setzen können. Und jQuery sucht darin und fügt allen übereinstimmenden Elementen (.class), die dort gefunden werden, Ereignisse hinzu.

Ex:

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

Dies wird die click Ereignis alle Elemente hinzufügen, die die .class Klasse haben, auch wenn sie über eine JS-Funktion hinzugefügt werden.

Quelle

2016-05-08 17:26:20 aifrim

JQuery $ (this) nicht erkannt, nachdem HTML geändert wurde

Antwort

Verwandte Themen