我想使用onclick事件来显示框内的div并添加一些按钮,允许用户编辑其内容。
当我用一个单独的按钮触发相同的功能时它一切正常,但是当我尝试向我页面上的所有div添加一个类(可编辑)以通过单击div来触发事件时它会复制我的按钮。 因此,它不是在盒子上方和下方的两个按钮,而是为每个按钮显示四个按钮。
我希望这里的任何人都可以帮助我。
我的代码(已简化,已删除样式):
HTML(仅包含一个div的示例):
<form id="editorForm" action="" method="post">
<div id="demo" class="editable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac neque mollis, iaculis lacus ut, imperdiet orci. Phasellus vulputate purus quis dictum scelerisque. Curabitur fermentum leo odio, in iaculis risus adipiscing quis.
</div>
</form>
JS:
<script type="text/javascript">
$(document).ready(function(e)
{
$('.editable').on('click', function(event)
{
editID = event.target.id;
var innerID = 'innerID' + editID;
var txt = $('#'+editID).html();
var btnTop = "<div id='editor'> \
<div id='editTop'> \
<button type='button' onclick='function1()'>Button 1</button> \
<button type='button' onclick='function2()'>Button 2</button> \
</div> \
<div id='editInput'>";
var btnBottom = "</div> \
<div id='editBottom'> \
<button type='button' onclick='editCancel()'>Cancel</button> \
<button type='button' onclick='editSave()'>Save</button> \
</div> \
</div>";
$('#'+editID).html(btnTop + txt + btnBottom);
$('#editInput').attr('contenteditable', 'true');
});
});
</script>
非常感谢你提供任何帮助,蒂姆。
答案 0 :(得分:1)
正如我在评论中提到的,请确保您的div ID是唯一的(与页面中的任何其他元素一样),并试试这个:
$(document).ready(function() {
$('.editable').on('click', function() {
// If it's already an editable one, just ignore it
if ($(this).find('div[contenteditable=true]').length > 0) {
return false;
}
// Wrap the div content (text) into an editable one
$(this).wrapInner('<div contenteditable="true" />');
// Top buttons
var btnTopWrapper = $('<div />');
var btnTop1 = $('<button />').text('Button 1').on('click', function() {
function1();
});
var btnTop2 = $('<button />').text('Button 2').on('click', function() {
function2();
});
$(btnTopWrapper).append(btnTop1).append(btnTop2);
// Bottom buttons
var btnBottomWrapper = $('<div />');
var btnBottom1 = $('<button />').text('Cancel').on('click', function () {
editCancel();
});
var btnBottom2 = $('<button />').text('Save').on('click', function () {
editSave();
});
$(btnBottomWrapper).append(btnBottom1).append(btnBottom2);
// Stick the top buttons before the editable div
$(this).prepend(btnTopWrapper);
// Stick the bottom buttons after the editable div
$(this).append(btnBottomWrapper);
});
});