Dynamic verstecken/zeigen nicht funktioniert mit .on

Question

Haben versucht, sich umzusehen, und bin mit einem meiner dynamischen Auslöser festgefahren.

Ich habe andere damit verbundene Threads überprüft, aber scheinen einige andere Codefehler zu haben, die dazu führen könnten, dass die vorgeschlagene .on-Methode fehlschlägt.

Der Code zielt darauf ab, zwei separate zu verbergen/zeigen - es gibt einige erste vorgerenderte, und einige geladen dynamisch nach.

Die vorgerenderten sind in Ordnung, die dynamischen fehlschlagen.

Die JQuery:

$("div .flipper_link").on("click", function() { 

      $(this).parent().find(".contain_content").toggle(); 
      $(this).parent().find(".card-tags").toggle(); 

     }); 

Und der dynamisch erstellten Code:

<div class="callout_surround"> 
         <div class="callout ct_shop"> 
          <div class='header-global header-shop'>Shop</div> 
          <div class="flipper_link header-shop"><i class="fi-loop"></i></div> 


          <div class='contain_content' uid="74" data-popup-open="popup-1"> 
           <img src='images/someimage.jpg' class='img_cont'/> 

           <div class='tile-text-cont'> 

            <div class='tile-desc'> 
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque 

            </div> 
           </div> 
          </div> 
          <div class="card-tags">Some tags etc</div> 

         </div> 

        </div> 

Ich bin ziemlich neu in jQuery, so entschuldige mich, wenn ich die falschen Methoden bin!

Answer 1

Eine einfache Möglichkeit zu beheben ändern Ihr Javascript ist zu sein:

<script> 
function flipValues(div) { 
    $(div).parent().find(".contain_content").toggle(); 
    $(div).parent().find(".card-tags").toggle(); 
} 
</script> 

ändern dynamisch generierte HTML ein haben Onclick auf das div umdrehen.

Beispiel:

<div class="flipper_link header-shop" onclick="flipValues(this);"> 
      <i class="fi-loop"></i> 
    </div> 

Answer 2

Für dynamische HTML Verwendung jquery on() Methode wie:

$(document).on("click",".flipper_link", function(){ 
    // do some thing here 
}); 

Answer 3

Der Selektor Sie die auf Klick Ereignis Befestigung nicht dynamisch sein zu können. Wenn Sie diesen Selektor entfernen und dann erneut hinzufügen, wird dadurch das On-Click-Ereignis oder ein beliebiges jQuery-Ereignis entfernt.

Sie müssen das Ereignis an einen Selektor anhängen, der am Anfang steht und immer da ist. Sie können keine Komponente verwenden, die dynamisch hinzugefügt oder zu einem späteren Zeitpunkt entfernt wird.

Glücklicherweise gibt uns jQuerys on() Methode die Möglichkeit, einen zweiten Selektor zu spezifizieren, um ihn einzugrenzen und zu erreichen, was Sie erreichen wollen. Zuvor wurde dafür live() verwendet, aber der neue Weg ist schneller. Wenn Sie eine ältere Version von jQuery verwenden, müssen Sie möglicherweise live() verwenden. Lass mich wissen, was deine Version ist, wenn das nicht funktioniert.

Es wird nicht empfohlen, das onclick -Ereignis innerhalb des Markups zu verwenden, aus vielen Gründen, auf die ich hier nicht eingehen werde. Sie können sich stackoverflow.com/questions/12627443/jquery-click-vs-onclick ansehen, aber .click ist veraltet. Es wird auch nicht empfohlen, das Ereignis an das Hauptdokument anzuhängen, z. B. mit $ (document) .on(), da dies jedes Mal ausgelöst wird, wenn jemand auf etwas auf der Seite klickt.

Sie werden das Ereignis auf einer ersten Selektor platzieren, die nicht dynamisch ist, dann dynamische Wähler im zweiten Parameter verweisen, etwa so:

$("#non-dynamic").on("click", ".flipper_link", function() { 

Sie müssen mehr Code zu Ihnen hinzufügen, oder verweisen Sie auf einen nicht dynamischen Selektor, der höher in Ihrem Markup ist.Hier ist ein Arbeits Schnipsel:

$(document).ready(function() { 
 
    $("#non-dynamic").on("click", ".flipper_link", function() { 
 
     $(this).parent().find(".contain_content").toggle(); 
 
     $(this).parent().find(".card-tags").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="non-dynamic"> 
 
<div class="callout_surround"> 
 
    <div class="callout ct_shop"> 
 
    <div class='header-global header-shop'>Shop</div> 
 
     <a class="flipper_link header-shop"> 
 
      <i class="fi-loop">Test Link</i> 
 
     </a> 
 
      <div class='contain_content' uid="74" data-popup-open="popup-1"> 
 
      <img src='images/someimage.jpg' class='img_cont'/> 
 
       
 
      <div class='tile-text-cont'> 
 
       <div class='tile-desc'> 
 
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non scelerisque 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="card-tags">Some tags etc</div> 
 
    </div> 
 
</div> 
 
</div>