【发布时间】：2019-05-28 21:30:26
【问题描述】：
我有多个具有相同类名的类似按钮的 div 元素，我正在尝试触发我单击的按钮各自的事件处理程序。我已经尝试过“每个”jquery 函数，但它只触发第一个元素。我也尝试在点击时使用文档。我也添加了 stopPropagation 和 preventDefault。
<div id="overview-comment-container" class="social-comment-container">
<ul class="comments-list">
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="commentinfo-block-wrapper">
<div id="distinct-user-comment" contenteditable="false">Salute</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
<li class="posted-video-comment">
<div class="comment-body-divider"></div>
<div class="comment-list-divider" align="center" width="90%"></div>
<div class="comment-user-details">
<span class="delete-comment"><img id="erase-img" title="Delete comment" src="https://www.flaticon.com/premium-icon/icons/svg/484/484662.svg"></span>
<span class="edit-comment"><img class="edit-img" title="Edit comment" src="https://image.flaticon.com/icons/svg/61/61456.svg"></span>
</div>
<div class="comment-block-wrapper">
<div id="distinct-user-comment"
contenteditable="false">Hello</div>
</div>
<div class="comment-buttons" style="display: none;">
<button id="update-button" class="social-update-button"> Update </button>
<button id="cancel-button" class="social-cancel-button"> Cancel </button>
</div>
<div class="comment-body-divider"></div>
</li>
</ul>
</div>
$( '.edit-img' ).each( function() {
$(this).click( function(e) {
e.stopPropagation();
var editComment = $( '#distinct-user-comment' );
var editCommentText = editComment.text();
$( '.delete-comment' ).css( "visibility", "hidden" );
$( '.edit-comment' ).css( "visibility", "hidden" );
editComment.html( '<textarea class="editPostedComment" placeholder="'+ editCommentText + '"style="width: 60%;">'
+ editCommentText +
'</textarea>' );
$( '.editPostedComment' ).one('focus', function() {
$( this ).text( editCommentText );
});
$('.comment-buttons' ).show();
});
});
$( '#cancel-button' ).click( function(e) {
e.stopPropagation();
e.preventDefault();
var onEditComment = $( '.editPostedComment' );
onEditComment.replaceWith('<div id="distinct-user-comment" contenteditable="false">' + onEditComment.attr('placeholder') + '</div>');
$( '.comment-buttons' ).hide();
$( '.delete-comment' ).css( "visibility", "visible" );
$( '.edit-comment' ).css( "visibility", "visible" );
});
【问题讨论】：
-
您有多个具有相同 id='distinct-user-comment' 的项目这是错误的，这将导致始终选择具有此 id 的第一个元素。您不需要 .each() 循环来处理具有相同类的所有元素。
-
@NawedKhan 使用 ia 类而不是 id 也不能解决这个问题
-
不，恐怕不会。您必须更具体地说明什么不起作用。哪个按钮..取消或编辑图像不起作用。您遇到了什么错误。
-
@NawedKhan 没有错误，它只是我单击的每个事件处理程序按钮仅触发对第一个元素的操作，如您所说。我把它放在 jsfiddle jsfiddle.net/or2sxmjc
标签： javascript jquery events