Click-Ereignis nicht richtig

Question

Arbeit habe ich ein Problem mit Click-Ereignis:

ich in HTML haben:

<div class="content-block cards-clipboard"> 
         <a class="download-all">Download All</a> 

         </div> 

Und ein JS:

var html = '<div class="card demo-card-header-pic data-url='+img+'">'+ 
    '<div style="background-image:url('+thumb+'); background-size: 100%; height: 272px; background-repeat: no-repeat;" valign="bottom" class="card-header color-white no-border">'+html_icone_camera+'</div>'+ 
    '<div class="card-content">'+ 
    '<div class="card-content-inner">'+ 
    '<p class="color-gray">Postado em '+datapub+'</p>'+ 
     '<p>'+legenda+'</p>'+ 
    '</div>'+ 
    '</div>'+ 
    '<div class="card-footer-'+id_link+'">'+ 
    '<button data-url='+img+' data-step="download" data-cod='+id_link+' type="button" class="download-imagem btn btn-primary btn-lg btn-block '+id_link+'"><i class="fa fa-download" aria-hidden="true"></i>&nbspDownload</button>'+ 
    '</div>'+ 
'</div>'; 

$$(html).appendTo('.cards-clipboard'); 

Und ein Auslöser:

$$('.download-all').on('click', function() { 
       $$("button[data-step='download']").click(); 

      }); 

Das ist: Ich habe eine Schaltfläche ('.download- all ') wenn Sie darauf klicken, lösen Sie einen Klick auf andere Buttons aus, die dynamisch über append (var html) generiert wurden und das Attribut data-step = download haben.

Allerdings, wenn ich in .download-all Schaltfläche klicken, wird die erste Taste nicht einen Klick erhalten - nur die erste Taste - die andere, erhalten ....

Ich schätze jede Hilfe

EDIT: Wenn ich $$("button[data-step='download']").click(); in Konsole setzen, die Klicks in allen Knöpfen ....

Answer 1

Wenn Sie jQuery verwenden, entfernen Sie 2 $ -Zeichen und haben nur eine gut funktioniert:

$(html).appendTo('.cards-clipboard'); 

Und Ihre Veranstaltung Befehl wäre:

$('.download-all').on('click', function() { 
      $("button[data-step='download']").trigger('click'); 

     }); 

Answer 2

Try JQuery trigger()

$$('.download-all').on('click', function() { 
      $$("button[data-step='download']").trigger("click"); 

}); 

zu verwenden Wenn nicht versuchen, den doppelten Dollarzeichen zu entfernen und einzelne Dollarzeichen verwenden.

Bitte wählen Sie und markieren Sie die Lösung, wenn nützlich.

Vielen Dank!

Answer 3

Nur die erste Schaltfläche wird ausgelöst, weil die Seite geladen wurde. PHP wird vor html/javascript ausgeführt. Da dies der Fall ist, kann der Ereignishandler keine Schaltfläche mit der angegebenen ID oder Klasse finden. Eine Möglichkeit, dies zu umgehen, besteht darin, einen Ereignis-Listener an den Bereich zu delegieren, der die dynamisch erstellten Schaltflächen enthält. Zum Beispiel

$('#myId').delegate('button','click',function() { 
     //do something 
});