Question

好的，所以我在Laravel中构建了一个应用程序，但我的问题在于jQuery。我正在为一些帖子创建评论部分。添加评论工作正常。在每个帖子下列出了特定帖子的所有评论。如果您发表评论，则会显示编辑按钮。如果按下编辑按钮，将会发生一些事情：

包含评论的p-tag将替换为textarea（保持相同的内容/文本）
编辑按钮将文本更改为“保存”（而不是“编辑”）
该按钮还会更改某些类，从而更改样式
按钮获得“保存模式”类

我试图这样做，当按钮具有保存模式类时，应该触发事件，从而更新数据库中的注释。现在，几乎所有部分都可以单独工作，但按下按钮时不会触发Ajax调用。我只是不明白为什么。值得一提的是，Ajax调用确实有效。但是应该触发它的if语句不会。

我的逻辑一定有问题。

我已经包含了一个片段，我猜测editComment函数中有错误。我已经删除了刀片语法，样式和周围标记。但是您可以在此代码段中看到相同的问题。

我非常感谢能够帮助我阐明自己的愚蠢。谢谢。

$("#edit-save-btn").on('click', function(e){
	e.preventDefault();
	editComment($(this));
});

function editComment(btn){
	const id = btn.attr('value');
	const comment = btn.closest('.col-md-3').prev().find('.comment-text');
	const commentHTML = $.trim(comment.text());

	if(btn.hasClass('save-mode')){
    		console.log('this need to get triggered');
		//updateComment(id, commentHTML);
		return;
	}

	btn.toggleClass('save-mode');

	const editable = $('<textarea />').css({'width': '100%'});
	editable.val(commentHTML);
	comment.replaceWith(editable);
	editable.focus();
	btn.removeClass('btn-primary').addClass('btn-success').html('<i class="fa fa-floppy-o" aria-hidden="true"></i> Lagre');
	editable.blur(editableTextBlured);
}

function editableTextBlured() {
	$("#edit-save-btn").removeClass('btn-success save-mode').addClass('btn-primary').html('<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Rediger');
	var text = $(this).val();
	viewableText = $('<p class="comment-text">');
	viewableText.html(text);
	$(this).replaceWith(viewableText);
	$(viewableText).click(editComment);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-post clearfix">
  <div class="col-md-9">
    <p class="comment-text">
      comment
    </p>
  </div>
  
  <div class="col-md-3">																	 
    <form class="pull-right right-margin" action="" method="post">
      <button value="{{$comment->id}}" class="btn edit-comment btn-primary btn-xs" id="edit-save-btn"><i class="fa fa-edit"></i> Edit</button>
  </form>
 </div>
</div>

Answer 1

单击该按钮将触发textarea的模糊事件。

在功能editableTextBlured，您删除了课程save-mode，因此btn.hasClass('save-mode')返回false，无法触发保存。

就是这样：

模糊 - ＆gt;删除className save-mode - ＆gt; btn.hasClass（'save-mode'） - ＆gt; false，无法触发保存。

希望它可以帮到你：）

在div和textfield之间切换时触发事件

1 个答案: