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
    });
});

但问题是，第一次代码中没有这个$（＆＃39; img.popUpClose.popUpCloseQview＆＃39;）元素。在提交按钮之后，单击时会发生警告，并且根据条件，此弹出消息即将出现，此功能随时无效。

也尝试了其他一些选择。但这些都不起作用。

请告知。

谢谢， Aniket

Answer 1

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

$('#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);

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

2 个答案: