Не работает пользовательский встроенный редактор с jquery - PullRequest
Новая
       18

Не работает пользовательский встроенный редактор с jquery

0 голосов
/ 03 сентября 2011

Я написал собственный встроенный редактор, и у меня проблема с ним. Если после этого я нажму кнопку «Сохранить», то не смогу снова отредактировать ее, как я могу это исправить? И можете ли вы помочь мне, чтобы сделать это несколько? Я имею в виду, эта работа только с 1 div на странице, не более 1. Вот код: 

$(function() 
{
    var fut = false;
    $('.jq_edit').live('click', function() {
        if (fut==true){ } else {                                 
        var tartalom = $(this).html();
        $(this).html("<input type='text' value='"+tartalom+"'><input type='button' value='Save' class='save'>");
        fut=true;
        }
    });
        $('.save').live('click', function() {
            var mtartalom=$(this).prev().attr('value');
            $('.jq_edit').html(mtartalom);
            $('.jq_edit').append(" <span id='ok'><img src='accept.png'> Success</span>");
            $('#ok').delay(1500).fadeOut(500);
        });
});

И HTML: 

<body>
<div class="jq_edit">adsadasd</div>
</body>

Спасибо за помощь!

Ответы [ 2 ]

1 голос
/ 03 сентября 2011

Чтобы сделать его многократным, вы должны изменить многое, вот мое решение: 

$(function() {
    $('.jq_edit').live('click', function() {
        // if success message is visible, remove it
        $(this).find('.ok').remove();

        // if already in input mode, return
        if ($(this).hasClass('inputMode')) {
            return true;
        }

        // change to input mode
        var tartalom = $(this).html();
        $(this)
            .empty()
            .append("<input type='text' value='" + tartalom + "'>")
            .append("<input type='button' value='Save' class='save'>")
            .addClass('inputMode');
    });

    $('.save').live('click', function() {
        // create success message
        var jSuccess = $("<span class='ok'> <img src='accept.png' /> Success</span>");

        // deactivate input mode
        $(this).parent()
            .html($(this).prev().val())
            .append(jSuccess)
            .removeClass('inputMode');

        // animate success message
        $(jSuccess).delay(1500).fadeOut(500, function() {
            $(this).remove();
        });

        // prevent jq_edit click handler
        return false;
    });
});

Также смотрите мой jsfiddle .

0 голосов
/ 03 сентября 2011

Пожалуйста, снимите флажок if(fut==true), и он должен работать нормально ... Что происходит, если для переменной fut установлено значение true, редактирование на месте никогда не будет выполнено. Я все еще не понимаю, зачем вам этот чек ...

...