How to create onClick function for a dynamically generated div

Question

I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.

HTML design is something like :

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

Now, I am trying to implement the onClick function like below :

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

But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.

Tried some other options too. But none of these are working.

Please advise.

Thanks, Aniket

[event-delegation](https://learn.jquery.com/events/event-delegation/) — empiric, Jan 18 '17 at 15:11
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — empiric, Jan 18 '17 at 15:11
Normal state
If the validation fails, then below data got added. Now I was trying to implement the onClick function for $('img.popUpClose.popUpCloseQview').

other details

Below code didnt worked even, $('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){ alert("A"); }) — Aniket, Jan 18 '17 at 15:33

Zakaria Acharki · Answer 1 · 2017-01-18T15:41:26.073

You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :

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

NOTE : No need for using each() loop.

Hope this helps.

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

Working snippet with comment code :

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>

Normal State -
If the validation fails, then below html added. Now I was trying to implement the onClick function for $('img.popUpClose.popUpCloseQview').

other details

Below code didnt worked even, $('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){ alert("A"); }) — Aniket, Jan 18 '17 at 15:35
(NOTE that you've already another click event attached `onClick`) the code should work if you `QView.close();` not fail.. check the new snippet in my answer. — Zakaria Acharki, Jan 18 '17 at 15:42

score 2 · Accepted Answer · answered Jan 18 '17 at 15:14

2

If you are dynamically generating the div in jquery, you can add the click event then. For example:

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

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

answered Jan 18 '17 at 15:14

MikeS

1,649
1
7
12

How to create onClick function for a dynamically generated div

2 Answers2