如何使用jquery为动态创建的文本框添加事件

时间:2016-05-21 11:45:43

标签: javascript jquery html

我正在使用jquery动态创建一些html。我在这个html中添加了一个文本框。现在我想为我创建的每个文本框添加一些click事件。谁能告诉我怎么做?这是我为创建动态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);

有人可以告诉我如何为每个创建的文本框添加事件

由于

2 个答案:

答案 0 :(得分:0)

如果要在html变量中添加处理程序,可以这样做:

var html = '';
....
html += '<script>$(document).ready(function() { $('input').click(function() { alert('This input was clicked')})})</script>'

答案 1 :(得分:0)

使用与#post-content绑定的委托,因为这也是您添加html的地方: -

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

});