JQuery показать и скрыть проблему - PullRequest
Новая
       12

JQuery показать и скрыть проблему

3 голосов
/ 20 июля 2009

У меня есть набор записей с кнопкой «Изменить» рядом с ними. У меня также есть div, который имеет форму внутри него.

когда я нажимаю "изменить", я показываю div. Внутри div у меня есть кнопка «закрыть», которая просто закрывает div с помощью jquery.hide (). когда я затем нажимаю кнопку «изменить» для другой записи, 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, который скрывается и отображается ...

Ответы [ 2 ]

0 голосов
/ 21 июля 2009

Краткий ответ: в вашем #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>
0 голосов
/ 20 июля 2009

Я старался быть ближе к вашей первоначальной идее. Я не думаю, что это хорошая идея сделать родительский div кликабельной зоной для редактирования содержимого.

Вы должны добавить «редактировать» текстовые ссылки, чтобы пользователь не ошибся нажатием на div, что привело к нежелательным результатам.

Проблема

У вас была проблема с добавлением . Вам нужно создать «новый» объект в DOM, чтобы позволить jQuery справиться с ним. Также я исправил «Отмена редактирования», чтобы при отмене он проходил через все редактируемые элементы div, чтобы скрыть редактируемый блок И восстановить исходные данные.

Вторая версия, которая позволяет только 1 редактирование с использованием ссылки на существующий div.

Полный код здесь 

    $(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;
});
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...