Javascript jQuery：使用变量ID复制函数输出

我想使用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>

<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>

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。Phasellus vulpute purus quis dictum scelerisque。发酵库拉索菌，在iaculis risus adipising quis中。

JS:

<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>

<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>

$（文档）.ready（函数（e）
{       
$（'.editable'）。在（'click'，函数（事件）
{
editID=event.target.id；
var innerID='innerID'+editID；
var txt=$（'#'+editID）.html（）；
变量btnTop=”\
\
按钮1\
按钮2\
\
";
变量BTNBOTOM=”\
\
取消\
拯救\
\
";
$（'#'+editID）.html（btnTop+txt+btnBottom）；
$（'#editInput'）.attr（'contenteditable'，'true'）；
});
});

---

非常感谢你在这方面的帮助，蒂姆

正如我在评论中提到的，请确保您的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);
    });
});

$（文档）.ready（函数（）{
$（'.editable'）。在（'click'，function（）上{
//如果它已经是可编辑的，就忽略它
if（$（this）.find（'div[contentediate=true]'）。长度>0）{
返回false；
}
//将div内容（文本）包装为可编辑内容
$（this.wrapInner（“”）；
//顶部按钮
变量btnTopWrapper=$（''）；
var btnTop1=$（''）.text（'Button 1'）。on（'click'，function（）{
功能1（）；
});
var btnTop2=$（''）.text（'Button 2'）。on（'click'，function（）{
函数2（）；
});
$（btnTopWrapper.append（btnTop1.append）（btnTop2）；
//底部按钮
var btnBottomWrapper=$（''）；
var btnBottom1=$（''）.text（'Cancel'）。on（'click'，function（）{
编辑取消（）；
});
var btnBottom2=$（''）.text（'Save'）。on（'click'，function（）{
编辑保存（）；
});
$（btnBottomWrapper.append（btnBottom1.append）（btnBottom2）；
//将顶部按钮粘贴到可编辑div之前
$（this）.prepend（btnTopWrapper）；
//将底部按钮粘贴在可编辑div之后
$（this）.append（btnBottomWrapper）；
});
});

---

演示：

为什么不使用event.target而不是它的id来直接针对jQuery<代码>变量目标=event.target；var txt=$（target.txt（）？除非您在某个地方重复div id，否则它似乎有效：或者您可以完全忽略该id：感谢大家的快速回复；使用event.target创建的按钮是正确的，但是我有一个问题，当你在可编辑的div中单击之后，它会在div中再次添加按钮，所以最后它仍然会复制它们，只是现在的步骤不同。解释一下：我想在这里实现的是，通过使用类“editable”单击每个div它将此div的内容放入一个框中，并在上面和下面添加两个按钮。这非常好用-非常感谢您的快速回复和有用的评论！