Jquery点击操作不适用于ajax追加的动态内容
Jquery点击操作不适用于ajax追加的动态内容
提问于 2015-03-31 18:10:51
如截图所示，我让comments-loaded-more-wrap元素作为按钮在div元素中展开区域。如果div包含任何文本内容，则在该div内有段落。如果没有段落，comments-load-more一开始就不会出现。它出现在我从输入元素添加文本之后。所以我在comments-loaded-more-wrap中附加了文本。但是在追加后，我的扩展jquery不起作用。当我刷新页面时，它工作得很好。
我想知道如何重新加载元素以继承jquery，或者有什么方法可以解决这个问题吗？
如果没有突出显示的内容按钮，一开始不要出现。当我从评论字段添加一些东西时，它就会出现。但是当我点击按钮时，jquery就不能工作了。如果有更多，该按钮是第一次有，它是工作的，如果我从评论字段添加一些东西。
这是我的按钮的图形视图：
下面是我的数据追加ajax：
//get comment input box id by its name
var elements = document.getElementsByName( 'comment_input' );
//on enter key press
$(elements).each(function(){
var cmt_id = $(this).attr('id');
var resp = cmt_id.split("_");
$('#comment_post_'+resp[2]).on('click', function(event) {
var comment = $('#'+cmt_id).text();
var form_data = {
comment_input : comment,
post_Id : resp[2],
ajax : '1'
};
$.ajax({
url: "comment/post_comment/",
type: 'POST',
async : true,
dataType:"json",
data: form_data,
success: function(data) {
$('#'+cmt_id).text('');
var latest_comment = data;
print_latest_comment(latest_comment);
}
});
});
});
function print_latest_comment(data){
$ght = $('#post_comment_id_'+ data.post_Id + ' .mCSB_container').children().length;
if($ght==0){
$('#post_comment_id_'+ data.post_Id + ' #panel1').append('<div class="comments-load-more" id="more-load-'+ data.post_Id +'">'+
'<span class="load-more-comments-count"><span class="new_cmt_count_'+ data.post_Id +'"></span></span>'+
'</div>');
$( '#post_comment_id_'+ data.post_Id + ' .mCSB_container' ).append('<div class="post-meta-single-comment" name="comment-field" id="comment_'+ data.comment_id +'">'+
'<div class="post-exp-top-meta-left">'+
'<div class="post-exp-top-meta-left-profile-picture">'+
'<a href="user?id='+ data.user_Id +'" ><img src="uploads/'+ data.pro_image.name + data.pro_image.ext +'"/></a>'+
'</div>'+
'<div class="post-exp-top-meta-left-profile-info">'+
'<div class="post-exp-top-meta-left-profile-name">'+
'<a href="user?id='+ data.user_Id +'" >'+ data.user_details.full_name +'</a>'+
'</div>'+
'<div class="post-exp-top-meta-left-profile-modes">'+
'<ul>'+
'<li><div class="time"><abbr class="timeago" title="'+ data.comment_datetime +'">less than a minute ago</abbr></div></li>'+
'<li class="flag"></li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="post-meta-single-comment-vote">'+
'<a class="comment-edit_'+ data.comment_id +'" title="Edit Comment" id="comment-edit">Edit</a>'+
'<i class="fa fa-times fa-2 close-comment" style="display: none;" title="Remove Comment" id="delete_comment_'+ data.comment_id +'"></i>'+
'<div class="comment-count">6</div>'+
'<div class="comment-icon"></div>'+
'</div>'+
'<div class="clearfix"></div>'+
'<div class="comment-content comment_content_'+ data.comment_id +'">'+
'<span class="comment-content-alone_'+ data.comment_id +'">'+ data.content +'</span>'+
'<input type="text" id="edit_comment_'+ data.comment_id +'" name="cmt_edit_input" style="display:none; padding:5px; height: 30px;" value="'+ data.content +'" spellcheck="true" />'+
'</div>'+
'</div>'
);
}
} // function end 回答 2
Stack Overflow用户
发布于 2015-03-31 18:35:56
我想知道如何重新加载元素来继承
，或者有什么方法可以解决这个问题吗？
如果在页面加载后添加按钮
$('#myNewButton').on('click', function....然后它就不会工作了，因为javascript已经运行了，并且它不会重新运行来将click事件绑定到post-ready按钮。
取而代之的是这样做。
$('#myContainerThatExistsInSourceCode').on('click', '#myNewButton', function()....这会将clickevent绑定到按钮的父级，因此子级不会有绑定到它的事件，但子级将触发绑定到父级的事件。
Stack Overflow用户
发布于 2015-03-31 18:35:12
$('body').on('click', '#comment_post_'+resp[2], function(event) {
var comment = $('#'+cmt_id).text();
var form_data = {
comment_input : comment,
post_Id : resp[2],
ajax : '1'
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29366033
复制相关文章
相似问题
腾讯云开发者
