onclick listener is not working with dynamic dom content

Question

With jquery on several event i required to add elements but on that elements click event is not triggered. I tried to add the listener in the ready function also but it doesn't worked. Anyone please help.

 $(document).ready(function(){
   $('#button').click(function(){
       var toAdd = $('input[name=checkListItem]').val();
       $('div.list').append('<div class="item-next">' + toAdd + '</div>')

   });
 
});

 $('.item-next').click(function(){
      alert()

   });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
     <title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <h2>Find Listeners</h2>
  <form name="checkListForm">
   <input type="text" name="checkListItem"/>
  </form>
  <button id="button">Click to Add</button>
  <br/><br/><br/>
      List
  <div class="list"></div>
 </body>
</html>

score 1 · Answer 1 · edited May 23 '17 at 11:53

Append event element Not work with normal click .so try with on()kindly see the important of that

 $(document).on()

It helpfull to learn on() Why use jQuery on() instead of click()

$(document).ready(function(){
   $('#button').click(function(){
       var toAdd = $('input[name=checkListItem]').val();
       $('div.list').append('<div class="item-next">' + toAdd + '</div>')

   });
 
});

 $(document).on('click','.item-next',function(){
      alert('its work')

   });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
     <title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <h2>Find Listeners</h2>
  <form name="checkListForm">
   <input type="text" name="checkListItem"/>
  </form>
  <button id="button">Click to Add</button>
  <br/><br/><br/>
      List
  <div class="list"></div>
 </body>
</html>

visit the link [Why use jQuery on() instead of click()](http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click) — prasanth, Dec 10 '16 at 06:36

score 0 · Answer 2 · answered Dec 10 '16 at 06:18

0

Try using quotation on 'checkListItem'

var toAdd = $("input[name='checkListItem']").val();

answered Dec 10 '16 at 06:18

Sajib Khan

22,878
9
63
73

score 0 · Answer 3 · answered Dec 10 '16 at 06:19

0

well when you dynamically create an element use following structure as event listener:

$(document).on('click','.item-next',function(){
  alert();
});

answered Dec 10 '16 at 06:19

Sam

1,424
13
28

Smit · Accepted Answer · 2016-12-10T06:27:23.360

Try this (resolved). learn more about delegate methods

 $(document).ready(function(){
 $('#button').click(function(){
 var toAdd = $('input[name=checkListItem]').val();
 $('div.list').append('<div class="item-next">' + toAdd + '</div>')

 });
 $('div.list').on('click', '.item-next', function(){
  $(this).html($(this).html()+"<span style='color:red;'> clicked")
  alert('clicked on '+$(this).html());
   });
   });

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
     <title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <h2>Find Listeners</h2>
  <form name="checkListForm">
   <input type="text" name="checkListItem"/>
  </form>
  <button id="button">Click to Add</button>
  <br/><br/><br/>
      List
  <div class="list"></div>
 </body>
</html>

score 0 · Answer 5 · answered Dec 10 '16 at 06:32

This gonna work for you

 $(document).ready(function(){
   $('#button').click(function(){
       var toAdd = $('input[name=checkListItem]').val();
       $('div.list').append('<div class="item-next">' + toAdd + '</div>')

   });
 $(document).on("click",".item-next",function(){alert("myalert")})
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
     <title>Find Listeners</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <h2>Find Listeners</h2>
  <form name="checkListForm">
   <input type="text" name="checkListItem"/>
  </form>
  <button id="button">Click to Add</button>
  <br/><br/><br/>
      List
  <div class="list"></div>
 </body>
</html>

onclick listener is not working with dynamic dom content

5 Answers5