如何為動態生成的div創建onClick函數

Question

我正在嘗試為div實施onClick函數，該div在提交頁面時取決於一些驗證而生成。 我正在嘗試從外部js文件實現相同的功能。

HTML設計類似於：

<div id="QViewInfo" style="top: 207px; left: 531.5px;">
    //dynamically generated
    <div>
    ---
    ----
    </div>
</div>

現在，我正在嘗試實現如下所示的onClick函數：

$('img.popUpClose.popUpCloseQview').each(function (index) {
    $(this).on("click", function (e) {
        //DO something
    });
});

但是問題是，第一次在代碼中不存在$（'img.popUpClose.popUpCloseQview'）元素。 在提交按鈕之后，點擊狀態發生，並且取決於出現的情況，此彈出消息即將出現，並且該功能在任何時候都不起作用。

也嘗試了其他一些選擇。 但是這些都不起作用。

請指教。

謝謝，Aniket

Answer 1

您可以使用事件委托on()將click事件附加到元素#QViewInfo所有div on()例如：

$('#QViewInfo').on('click', 'div', function(){
    //DO something
})

注意：不需要使用each()循環。

希望這可以幫助。

 $('#QViewInfo').append('<div>Div 3</div>'); $('#QViewInfo').on('click', 'div', function(){ console.log($(this).text()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="QViewInfo" style="top: 207px; left: 531.5px;"> <div>Div 1</div> <div>Div 2</div> </div> 

帶有注釋代碼的工作片段：

 var img = '<img src="/Images/...." onclick="alert(\\'QView.close();\\')" alt="Close Quick View" class="popUpClose popUpCloseQview">'; $('.oosInfo').append(img); $('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){ alert("A"); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="QViewInfo"> <div class="oosInfo"> <div class="alertImgDiv"> <span class="oosAlertImg"></span> </div> </div> </div> 

Answer 2

如果要在jquery中動態生成div，則可以添加click事件。 例如：

var div = $("<div>");
div.click(function(){//dostuff});

$("#QViewInfo").append(div);