Html Update auf JQuery klicken Ereignis

Question

Ich habe eine Tabbed-DIV-Element, das auf den ersten Klick ändert sich aber danach verliert Funktionalität

HTML:

<div id="holder"> 
<ul style="list-style:none; margin:0; padding:0;"> 
<li><a name="CondLink"id="onlink">Link1</a></li> 
<li><a name="EffLink">Link2</a></li> 
</ul> 
</div> 

Javascript (jQuery):

$('a[name=CondLink]').click(function(){ 
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink" id="onlink">Link1</a></li><li><a name="EffLink">Link2</a></li></ul>'); 
}); 

$('a[name=EffLink]').click(function(){ 
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink">Link1</a></li><li><a name="EffLink" id="onlink">Link2</a></li></ul>'); 
}); 

Wenn Sie auf eine der beiden Registerkarten klicken, wird der HTML-Code nur beim ersten Klick aktualisiert. Bei nachfolgenden Klicks wird jedoch keine Funktion ausgeführt.

(Hinweis: die Konsole geben Sie mir keine Fehler, sondern auch einen Haltepunkt in einem der Klick-Funktionen auf Followup Klicks nicht getroffen)

Answer 1

Das ist, weil Sie ersetzen Ihre Links. Daher befinden sich die gebundenen Ereignis-Listener nicht mehr auf den neuen Links, also binden Sie sie einfach neu, nachdem Sie die Links ersetzt haben.

function bindClicks(){ 
 
    $('a[name=CondLink]').click(function(){ 
 
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink" id="onlink">Link1</a></li><li><a name="EffLink">Link2</a></li></ul>'); 
 
    bindClicks(); 
 
    }); 
 
    $('a[name=EffLink]').click(function(){ 
 
    $('div[id=holder]').html('<ul style="list-style:none; margin:0; padding:0;"><li><a name="CondLink">Link1</a></li><li><a name="EffLink" id="onlink">Link2</a></li></ul>'); 
 
    bindClicks(); 
 
    }); 
 
} 
 
bindClicks();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="holder"> 
 
<ul style="list-style:none; margin:0; padding:0;"> 
 
<li><a name="CondLink"id="onlink">Link1</a></li> 
 
<li><a name="EffLink">Link2</a></li> 
 
</ul> 
 
</div>

Answer 2

Ihre weiteren Klick-Ereignisse funktionieren nicht, weil Sie Elemente Kind „des Halters“ außer Kraft setzen. Sie löschen sie im Grunde und fügen neue Elemente hinzu, die kein gebundenes Klickereignis haben.

Einfache Lösung:

diese ersetzen:

$('a[name=CondLink]').click(function(){ 
    // code... 
}); 

mit diesem:

$(document).on('click', 'a[name=CondLink]', function(e) { 
    // code... 
});