Javascript 在一个按钮上切换两个事件
我正在尝试添加一些功能，以便能够在线编辑评论。到目前为止还很接近，但我在尝试触发第二个事件时遇到了一些问题。它第一次起作用，但之后就失败了Javascript 在一个按钮上切换两个事件,javascript,jquery,events,jquery-events,Javascript,Jquery,Events,Jquery Events,我正在尝试添加一些功能，以便能够在线编辑评论。到目前为止还很接近，但我在尝试触发第二个事件时遇到了一些问题。它第一次起作用，但之后就失败了 $(function() { var $editBtn = $('.js-edit-comment-btn'); var clicked = false; $editBtn.on('click', $editBtn, function() { clicked = true; var $that = $
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').append('saved');
clicked = false;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
$（函数（）{
var$editBtn=$（'.js编辑注释btn'）；
var=false；
$editBtn.on（'click'，$editBtn，function（））{
单击=真；
var$that=$（this）；
var$form=$that.closest（'.js编辑注释'）；
var$commentTextBody=$that.closest（'div'）.find（'js comment body'）；
var commentText=$commentTextBody.text（）；
变量$editableText=$（''）；
如果（$that.text（）==='保存编辑'）{
$that.text（'Saving…'）.attr（'disabled'，true）；
}否则{
$that.text（'Save Edits'）.attr（'alt'，'Save your Edits'）；
}
//将div替换为textarea，并用注释文本填充它
var makeDivTextarea=函数（$editableText，commentText，$commentTextBody）{
$editableText.val（commentText）；
$commentTextBody.replaceWith（$editableText）；
$editableText.addClass（'gray_textarea js edited comment'）.width（'100%'）.css（'padding'，'4px'）.focus（）；
};
makeDivTextarea（$editableText，commentText，$commentTextBody）；
var saveEdits=函数（$that，$editableText）{
$that.on（'click'，$that，function（）{
如果（单击）{
var comment=$that.closest（'div'）.find（'js edited comment'）.val（）；
$editableText.wrap（“”）.replaceWith（注释）；
$that.text（'Edit'）.attr（'alt'，'Edit Your Comment'）.attr（'disabled'，false）；
$（'输出'）.append（'保存'）；
单击=假；
返回false；
}
});
};
saveEdits（$editableText）；
返回false；
});
});
Hiya演示您的工作解决方案： 问题是：）我已经纠正了另一件小事<代码>即$（“#输出”）在附加另一个已保存的文本之前设置为空，因此文本**已保存**将只显示一次。 小提示：如果我建议使用按钮的Id，或者如果有许多编辑按钮，请尝试使用
这个，我估计您已经使用过了；我会看看我是否可以写得更干净，但那将是晚些时候，但这应该可以解决你的问题。：）享受吧
Jquery代码
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').text("");
$('#output').append('saved');
clicked = true;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});
$（函数（）{
var$editBtn=$（'.js编辑注释btn'）；
var=false；
$editBtn.on（'click'，$editBtn，function（））{
单击=真；
var$that=$（this）；
var$form=$that.closest（'.js编辑注释'）；
var$commentTextBody=$that.closest（'div'）.find（'js comment body'）；
var commentText=$commentTextBody.text（）；
变量$editableText=$（''）；
如果（$that.text（）==='保存编辑'）{
$that.text（'Saving…'）.attr（'disabled'，true）；
}否则{
$that.text（'Save Edits'）.attr（'alt'，'Save your Edits'）；
}
//将div替换为textarea，并用注释文本填充它
var makeDivTextarea=函数（$editableText，commentText，$commentTextBody）{
$editableText.val（commentText）；
$commentTextBody.replaceWith（$editableText）；
$editableText.addClass（'gray_textarea js edited comment'）.width（'100%'）.css（'padding'，'4px'）.focus（）；
};
makeDivTextarea（$editableText，commentText，$commentTextBody）；
var saveEdits=函数（$that，$editableText）{
$that.on（'click'，$that，function（）{
如果（单击）{
var comment=$that.closest（'div'）.find（'js edited comment'）.val（）；
$editableText.wrap（“”）.replaceWith（注释）；
$that.text（'Edit'）.attr（'alt'，'Edit Your Comment'）.attr（'disabled'，false）；
$（'#output'）。文本（“”）；
$（'输出'）.append（'保存'）；
单击=真；
返回false；
}
});
};
saveEdits（$editableText）；
返回false；
});
});
这仍然是一个问题。第二个事件一直在冒泡。我通过添加e.stopPropagation（）尝试单击它（按钮的第二个事件处理程序），但这并没有解决它。基本上，我之所以在它后面加上“saved”是为了说明这个例子。我想我应该说得更清楚些。@bob_cobb Hiya Coolos第二件事是什么？我原以为早期版本的JSFIDLE甚至不起作用，但现在您无法编辑和保存！+追加保存不清楚。请让我知道，如果我没有得到任命和抱歉，如果我没有得到和声音有点厚，但肯定可以帮助你：）干杯的人！