jQuery onClick not working on dynamically added elements

Question

I am trying to grab the value of html elements on click using jQuery but problem is that on click works on html which is hard coded, but if i add new html dynamicallly then onclick doesn't work on those elements. What am I doing wrong here? Code example given below. Please let me know if you need some more information.

HTML:

<div class="col-1" id="miniImgHolder">
   <input type="file" name="my_file[]" class="custom-file-input custom-file-label theFiles" style="cursor:pointer;">
</div>

<div class="col-1 miniImg">
    <img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img1.png"><!--this .miniImg on click works fine-->
</div>
<div class="col-1 miniImg">
    <img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img2.png"><!--this .miniImg on click works fine-->
</div>

JavaScript:

<script type="text/javascript">
$(document).ready(function () {
//display pic real time and add new upload button
$(document).on("change", "input[type='file']", function (e) {
    if (e.target.files[0] != null) {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $("#miniImgHolder").after("<div class='col-1 miniImg'><img class='img-fluid' src='" + e.target.result + "'></div>");//.miniImg on click not works if it set from here
            }
            reader.readAsDataURL(this.files[0]);
        }
    }
});
//click not working for bellow code
$(".miniImg").on("click", function () {
    console.log("i am not working on newly added miniImg");
});

});

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 08 '20 at 10:45

score 3 · Accepted Answer · answered Aug 08 '20 at 02:34

You need to event Delegation on your dynamically added element so that a click event can be listened.

Since the element added after the DOM is ready are not part of DOM we need to use event Delegation so that a click event can be triggered from those elements.

Demo:

$(document).ready(function() {
  //display pic real time and add new upload button
  $(document).on("change", "input[type='file']", function(e) {
    if (e.target.files[0] != null) {
      if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          $("#miniImgHolder").after("<div class='col-1 miniImg'><img class='img-fluid' src='" + e.target.result + "'></div>"); //.miniImg on click not works if it set from here
        }
        reader.readAsDataURL(this.files[0]);
      }
    }

  });
  //click not working for bellow code
  $(document).on("click", '.miniImg', function() {
    console.log("i am not working on newly added miniImg");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-1" id="miniImgHolder">
  <input type="file" name="my_file[]" class="custom-file-input custom-file-label theFiles" style="cursor:pointer;">
</div>

<div class="col-1 miniImg">
  <img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img1.png">
  <!--this .miniImg on click works fine-->
</div>
<div class="col-1 miniImg">
  <img class="img-fluid" style="width:75px; height:75px;" src="~/Images/img2.png">
  <!--this .miniImg on click works fine-->
</div>

@freedomn-m Done. Thanks a-lot for this. I really appreciate it. — Always Helping, Aug 08 '20 at 11:19

jQuery onClick not working on dynamically added elements

1 Answers1