如何在ajax中使用動態添加的html類

我試圖從一個頁面上的文件夾中拉出所有圖像。然後，我已經添加了html類到'.append'函數對jQuery中的ajax元素。現在我想在另一個函數中使用ajax之外的類。但是，這個班似乎是本地的，因此沒有被定義在阿賈克斯之外。你能告訴我如何解決這個問題嗎？我的代碼 -如何在ajax中使用動態添加的html類

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

由於'imageThumbnails'無法被系統識別爲有效類，因此不起作用。你能幫忙嗎？

來源

2016-11-05 Sujoy

的[可能的複製如何返回從響應異步調用？]（http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） – Tibrogargan

您可以使用下面的代碼來

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

此調用動態綁定綁定事件。

來源

2016-11-05 06:24:27 Veer

謝謝你Veer！有效。 :) – Sujoy

Delegate it。將偵聽器附加到它的父級並讓事件冒泡。

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

來源

2016-11-05 06:23:43 ltamajs

謝謝你Itamajs！這一個也工作！ – Sujoy

看到它的工作.. 您不關閉您的點擊功能.`

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

來源

2016-11-05 06:25:54 prasanth

如何在ajax中使用動態添加的html類

回答

相關問題