0

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

非常感谢您对此提供的任何帮助，蒂姆。

4

1 回答 1

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);
    });
});

演示：http: //jsfiddle.net/GFmgG/2/

于 2013-11-04T10:30:20.923 回答