1

I am creating some html dynamically using jquery. I added a textbox in this html. Now I want to add some click event for every textbox which I have created. Can anybody please tell me how to do it ?. Here is the code which I written for create dynamic html

var html = '';
html += '<div class="post-box">';
html += '<h2><img alt="Post profile" src="img/post-profile.png"><span class="col-lg-10">' + value['username'] + '<a href="#">Desi Rockers</a>';
html += '<div class="setting"><a href="#"><img alt="Setting" src="img/setting.png"></a></div><br>';
html += '<div class="time">'+value['postdate'] +'<img alt="Post to Friend" src="img/post-friend.png"></div></span> </h2>'
html += '<div class="clearfix"></div>';
html += '<div id="postcontent" class="col-lg-12 col-sm-12 col-xs-12 mypost">' + value['postcontent'] + '</div>';
html += '<div class="comment-pnl music-pnl">';
html += '<ul>';
html += ' <li><a href=""><img align="Like" src="img/like-bt.png"></a></li>';
html += '<li><a href=""><img align="Comment" src="img/comment.png"></a></li>';
html += '<li><a href=""><img align="Sahre" src="img/share.png"></a></li>';
html += '</ul>';
html += '<div class="clearfix"></div>';
html += '</div>';
html += '<div class="comment-box col-lg-12 col-sm-12 col-xs-12">'
html += '<div class="like-box1"><img alt="" src="img/like-bg.png"> <a href="#">john</a>,';
html += ' <a href="#">preet</a> and <a href="#">10 others</a></div>';
html += '</div>';
html +='<div class="usre-comment col-lg-12 col-sm-12 col-xs-12"><a href="#"> <img src="img/artist-profile.png" alt="User Profile" ></a> <div class="comment-b1 col-lg-10 col-sm-10 col-xs-9" > <input type="text" class="col-lg-10 text1 col-sm-10 col-xs-12" > <a href="#"><img src="img/camera2.png" alt="Images" ></a> <a href="#"><img src="img/smile.png" alt="Smile" ></a></div></div>'

$('#post-content').prepend(html);

Can anybody please tell me how to add event for each textbox created

Thanks

BenG
  • 14,826
  • 5
  • 45
  • 60
Azad Chouhan
  • 47
  • 1
  • 11
  • 1
    Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – dotnetom May 21 '16 at 11:51
  • This is a question duplicated many times. – gaetanoM May 21 '16 at 11:59

2 Answers2

0

If you want to add the handlers inside the html variable, you can do like this:

var html = '';
....
html += '<script>$(document).ready(function() { $('input').click(function() { alert('This input was clicked')})})</script>'
iuliu.net
  • 6,666
  • 6
  • 46
  • 69
  • This is a very dirty solution. 1) Normally you use event delegation to achieve this. (see link from dotnetom above) 2) Mixing HTML and JavaScript like this is considered bad practice (see separation of concerns). – Andreas Linnert May 21 '16 at 12:14
0

use a delegate bound against #post-content as this is where you are adding the html too:-

$('#post-content').on('click', 'input[type="text"]', function(){

});
BenG
  • 14,826
  • 5
  • 45
  • 60