Wie verwende ich eine dynamisch hinzugefügte HTML-Klasse in Ajax

Ich versuche, alle Bilder aus einem Ordner auf einer Seite zu ziehen. Dann habe ich der Funktion ".append" eine HTML-Klasse gegen ein Element von jquery innerhalb von ajax hinzugefügt. Jetzt möchte ich die Klasse außerhalb von Ajax in einer anderen Funktion verwenden. Aber es scheint, dass die Klasse lokal war und daher außerhalb von Ajax nicht definiert wurde. Können Sie mir bitte sagen, wie Sie das lösen können? Mein Code -Wie verwende ich eine dynamisch hinzugefügte HTML-Klasse in Ajax

/* html code */ 
<body> 
    <div id="imageWrapper"> 

     <div id="spanImage"></div> 

    </div> 

<script> 
var folder = "images/"; 
    $.ajax({ 
     url : folder, 
     success: function (data) { 
      $(data).find("a").attr("href", function (i, val) { 
       if(val.match(/\.(jpe?g|png|gif)$/)) { 
        $("#spanImage").append("<img src='"+ folder + val +"' class='imageThumbnails'>"); 
       } 
      }); 
     } 
    }); 

/* I have added class = 'imageThumbnails' dynamically to each image appended. Now I would like to use the class to work on individual image to make them pop up 
*/ 
$(".imageThumbnails").click(function() {...} 

</script> 
</body>

Dies funktioniert nicht, da 'imageThumbnails' vom System nicht als gültige Klasse erkannt wird. Können Sie bitte helfen?

Quelle

2016-11-05 Sujoy

Mögliche Duplikat [Wie kehre ich die Antwort von ein asynchroner Anruf?] (http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Tibrogargan

können Sie unter Code verwenden Ereignis

$(document).on("click",".imageThumbnails",function() {...});

diesen Aufruf dynamische Bindung zu binden.

Quelle

2016-11-05 06:24:27 Veer

danke Veer! Es funktionierte. :) – Sujoy

Delegate it. Verbinden Sie den Listener mit seinem übergeordneten Element und lassen Sie das Ereignis platzen.

$("body").on('click', '.imageThumbnails', function() {...}

Quelle

2016-11-05 06:23:43 ltamajs

danke Itamajs! dieser hat auch funktioniert !! – Sujoy

Siehe Seine Arbeits .. Sie Ihre Klickfunktion nicht schließen .`

$(document).ready(function() { 
$(".imageThumbnails").click(function() {...}) 
})

(function() { 
 
    $('body').append('<img class="imageThumbnails" src="some.png" alt="submit" >') 
 
    
 
    })() 
 

 
$(document).ready(function() { 
 
$('.imageThumbnails').click(function() { 
 
    
 
    console.log('work'); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quelle

2016-11-05 06:25:54 prasanth

Wie verwende ich eine dynamisch hinzugefügte HTML-Klasse in Ajax

Antwort

Verwandte Themen