问题

Question

我有一组记录，旁边有一个“编辑”按钮。我也有一个div，里面有一个表单。

当我点击“编辑”时，我会显示div。在div中，我有一个“关闭”按钮，只需通过jquery.hide（）关闭div。当我然后单击另一条记录的“编辑”按钮时，div根本不显示。

我使用其他节目并在我的代码中隐藏其他元素，它们工作得很好。只有这一个我无法工作。

在我的情况下是否有特定用途的show（）和hide（）方法？

    $('.edit').live('click', function() {
        var theid = $(this).attr('id');

        $('#' + theid).empty().append($('.rec_edit').show());

        if ($('#txt_nowediting_id').val() > 0) {
            load_single_rec($('#txt_nowediting_id').val());  
        };

        $('#txt_nowediting_id').val(theid);

        return false;
    });


    $('#btnCancelEdit').click(function() {
        $('.rec_edit').hide();
        load_single_rec($('#txt_nowediting_id').val());
        return false;
    });

这里.rec_edit是隐藏并显示的div ......

Answer 1

我试图让自己接近原来的想法。我不认为让父div成为可点击区域来编辑内容是个好主意。

您应该添加“编辑”文字链接，这样用户就不会错误地点击div，从而导致意外结果。

问题

你遇到的问题是append本身。您需要在DOM上创建一个“新”实体，以允许jQuery处理它。此外，我修复了“取消编辑”，以便当您取消它时循环遍历整个可编辑的div以隐藏可编辑框并恢复原始数据。

使用现有div的引用仅允许1次编辑的第二个版本。

完整代码here

    $(document).ready(function(){
    var content = $('.rec_edit').html();
    var editing = false;
$('.edit').click(function() {
        if( editing == false ) {
            var theid = $(this).attr('id');
            var tis = "#"+theid;
            // We hide P, because it's the original, so when we hide the "editing" div
            // the original pops back in.
            $(tis + " p").hide("fast");
            // 
            $(tis).append( $('.rec_edit').show().html(content + theid) );
            editing = true;
        }
    return false;
});
$('#btnCancelEdit').click(function() {
    $('.rec_edit').each(function(){
        if( editing == true ) {
            // We get the parent id, so we can use it to display the hidden P to
            // restore the original.
            var parent = "#" + $(this).parent().get(0).id + " p";
            $(parent).show("fast");
            $(this).hide();
            editing = false;
            // $(this).remove();
        }
        });

    return false;
});
    });

Answer 2

简短回答：在#btnCancelEdit点击处理程序中，更改此内容：

$('.rec_edit').hide();

到此：

$('.rec_edit').hide().appendTo('body');

（或者，如果不是body，则标记为最初的位置。）否则，我认为在设置编辑器时，您对empty()的调用正在消除它。

这是一个适合我的完整示例（调整代码以解决不完整的代码，例如load_single_rec）：

<html>
    <head>

        <script type='text/javascript' src='js/jquery-1.3.2.js'></script>

        <script type='text/javascript'>
            var editor;

            $(document).ready(function() {

                $('.edit').live('click', function() {
                    var theid = $(this).attr('id');

                    $('#' + theid).empty().append($('.rec_edit').show());
    /*
                    if ($('#txt_nowediting_id').val() > 0) {
                        load_single_rec($('#txt_nowediting_id').val());
                    };
    */
                    $('#txt_nowediting_id').val(theid);

                    return false;
                });


                $('#btnCancelEdit').click(function() {
                    $('.rec_edit').hide().appendTo('body');

                    // load_single_rec($('#txt_nowediting_id').val());
                    $('#' + $('#txt_nowediting_id').val()).text('edited!');
                    return false;
                });
            });
        </script>

    </head>
    <body>
        <form>

            <div id='div1' class='edit' style='border: 2px solid #00f;' >
                Edit me
            </div>

            <div id='div2' class='edit' style='border: 2px solid #00f;' >
                Edit me too
            </div>

            <div class='rec_edit' style='display:none; border: 2px solid #f00;'>
                Editor
                <input type='button' id='btnCancelEdit' value='Cancel' />
            </div>

            <input type='hidden' id='txt_nowediting_id' />


        </form>
    </body>
</html>

jquery显示和隐藏问题

2 个答案:

问题

使用现有div的引用仅允许1次编辑的第二个版本。