How to assign click event for dynamically added span element?

Question

html:

<div class="testSpanDiv"></div>

javascript:

  $(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');
  }

  $('#testSpan').on('click', function(){
      $(this).parent().remove();
  });

Event is not firing while giving a click to span element added dynamically. Event is firing if span element is statically added to the html. Can you give any suggestion over it.

I tried like below also, but not working.

  $('#testSpan').on('click', '.testSpanDiv', function(){
      $(this).parent().remove();
  });

score 0 · Answer 1 · answered Aug 24 '16 at 06:17

0

You need to use like this:

 $('.testSpanDiv').on('click', '#testSpan', function(){
  // ^^ parent div             ^^ element in which you want to bind the function
      $(this).parent().remove();
 });

answered Aug 24 '16 at 06:17

Bhojendra Rauniyar

83,432
35
168
231

Thanks for your answer. I am new to UI design, but getting a doubt even though I added while document load why span element can't be traced out. It looks weird to me. Any link or info appreciable. – Sandeep sandy Aug 24 '16 at 06:33
See the link that I have closed your question with. – Bhojendra Rauniyar Aug 24 '16 at 06:33

score 0 · Answer 2 · answered Aug 24 '16 at 06:20

0

your syntax error try this way

$(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');


   $('#testSpan').on('click', function(){
      $(this).parent().remove();
  });
  });

https://jsfiddle.net/7x8jbLpt/

answered Aug 24 '16 at 06:20

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 3 · answered Aug 24 '16 at 06:20

You can delegate the event from body

Also note there are some syntax error in your code

 $(document).ready(function () {
      $('.testSpanDiv').append('<span id="testSpan">Hello</span>');
  })

  $('body').on('click', '#testSpan', function(){
      alert("Hello")
  });

JSFIDDLE

How to assign click event for dynamically added span element?

3 Answers3