如何为动态生成的 div 创建 onClick 函数

Question

我正在尝试为 div 实现 onClick 函数，该函数是在提交页面时根据一些验证生成的。我正在尝试从外部 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') 元素第一次出现在代码中。在提交按钮点击后发生变化，并且根据情况出现此弹出消息并且此功能随时无法使用。

也尝试了一些其他选项。但其中 none 有效。

请指教

谢谢，阿尼克特

Answer 1

您可以使用事件委托 on() 将点击事件附加到元素 #QViewInfo 的所有 div，例如：

$('#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，可以添加点击事件。例如：

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

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

如何为动态生成的 div 创建 onClick 函数

How to create onClick function for a dynamically generated div

javascript

jquery

onclick

dynamically-generated