Add eventlistener for element that was created by javascript code

Question

I write html and javascript:

$(document).ready(function(e) {
  $('#btadd').click(function(e) {
    $('#content').html('<span class="btnmsg"></span>' + $('#result').html());
    $('.btnmsg')[i].click(function(e) {
      alert('span ' + i);
    });
    i++;
  });
});

var i = 0;

<input type='button' value='add' id='btnadd'>
<div id='content'></div>

On html code, I create a button and a div. When click on button, on div will add new element span.

I want that when click on span, there will be a alert message. I don't want to use inline js (add onClick to span), because I write this addon for browser.

So I just want to write this event for span in js only.

I write as above code, but nothing to see (no alert message). What can I do?

Remove the `[i]` from `$('.btnmsg')[i].click(...)` - the way you have it you're trying to call a jQuery method on a DOM element. (Which will lead to your next problem, but at least it's a start...) — nnnnnn, Mar 03 '17 at 06:28
@madalinivascu The event can be attached to the element when created using `jQuery(html, attributes)` — guest271314, Mar 03 '17 at 06:33

score 0 · Answer 1 · answered Mar 03 '17 at 06:27

0

Try event delegation:

  $('#btnadd').click(function(e) {
    $('#content').html('<span class="btnmsg">xxxxxxxxx</span>');
  });

$('#content').on('click','.btnmsg',function(e) {
  alert('span ');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='add' id="btnadd">
<div id="content"></div>

answered Mar 03 '17 at 06:27

madalinivascu

32,064
4
39
55

1

What about the number that was in the OP's alert? – nnnnnn Mar 03 '17 at 06:31
what about it?? – madalinivascu Mar 03 '17 at 06:32

score 0 · Answer 2 · answered Mar 03 '17 at 06:30

0

Substitute "btnadd" for "btadd". Needs more jQuery()

$(document).ready(function(e) {
  var i = 0;
  $("#btnadd").click(function(e) {
    $('#content').html(
      $("<span>", {
        "class": "btnmsg",
        html: $("#result").html(),
        on:{"click": function(e) {
                       alert("span " + i);
                     }
           }
      })
     );
    i++;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">result </div>
<input type='button' value='add' id='btnadd'>
<div id='content'></div>

answered Mar 03 '17 at 06:30

guest271314

1
15
104
177

something new i never seen, from what version is this `on` syntax available ? – madalinivascu Mar 03 '17 at 06:41
nice and the answer to my question is version 1.8 – madalinivascu Mar 03 '17 at 06:45
this is better than above :) – Freelancer Mar 03 '17 at 17:07
@HTCom Not sure what you mean? – guest271314 Mar 03 '17 at 17:13

Dylan Auty · Accepted Answer · 2017-03-03T07:01:33.697

0

Just off the top of my head here, this code should do the trick:

var i = 0;
$(document).ready(function(e) {
    $('#btnadd').click(function(e) {
       $('#content').html('<span id="btnmsg_' + i + '"></span>'+$('#result').html());
       $('#content').on('click', '#btnmsg_' + i, function(e) {
         alert('span '+i);
       });
     i++;
   });
});

Using an ID (ex: #btnmsg_3) will mean you can assign unique event listeners for each created object.

We then use the 'on' function in jQuery to create a dynamic binding instead of one which is dependent on the DOM content.

Does this help?

edited Mar 03 '17 at 07:01

answered Mar 03 '17 at 06:38

Dylan Auty

360
2
6

_"I believe the best solution would be to write something like this:"_ What do you mean by "best"? Why do you "believe" the same? Note also, no element having `id` `"btadd"` appears at `html` at Question. – guest271314 Mar 03 '17 at 06:39
Apologies, I missed the typo by OP. Fixed in my code snippet. By 'best' I simply mean to say this would be the quickest way I could write it. – Dylan Auty Mar 03 '17 at 06:46
What is purpose of `$('body').on('click', '#btnmsg_' + i)`? Why cannot you attach the event directly to `'#btnmsg_' + i` element? Why did you not include _"this would be the quickest way I could write it"_ as description of your estimation of "best" at Answer? – guest271314 Mar 03 '17 at 06:50
In some cases when binding an event directly to it's identifier, the dynamic binding will not occur for elements which are generated on the fly. Therefore targeting **body** and then binding the event ensures that the binding can be made as the elements are created. This is just from personal experience – Dylan Auty Mar 03 '17 at 06:55
_"In some cases when binding an event directly to it's identifier, the dynamic binding will not occur for elements which are generated on the fly."_ For the `javascript` at Question? _"Therefore targeting body and then binding the event ensures that the binding can be made as the elements are created."_ Why do you not bind event to parent element `#content`? – guest271314 Mar 03 '17 at 06:58
Fair point, I will adjust the question to reflect the #content binding instead - Thanks – Dylan Auty Mar 03 '17 at 07:00
Agreed, it was poor choice of phrasing. I have corrected it. – Dylan Auty Mar 03 '17 at 07:02

Add eventlistener for element that was created by javascript code

3 Answers3