jQuery - редактирование только что созданного div с jEditable не работает - PullRequest
Новая
       13

jQuery - редактирование только что созданного div с jEditable не работает

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

Я пытаюсь создать редактор внешнего интерфейса и передаю данные в новый div с помощью вызова AJAX, например: 

function renderForm(type, position) {
    $.ajax({
        type: 'POST',
        url: 'renderForm.php',
        data: "type="+type+"&position="+position,
        success: function(data){
            var editbutoff = $(editbut).offset();
            $(document.createElement('div')).attr('id', 'editor')
                .height(($(divpar).height()+20))
                .width(($(divpar).width()+20))
                .css({position: 'absolute', left: editbutoff.left-($(divpar).width()+20), top: editbutoff.top-20, margin: "5px"})
                .append(data)
                .fadeIn("slow")
                .prependTo(pptest);
        }
    });
}

Пока все отлично работает. Новый div показывает данные на месте, и все выглядит так, как должно, но тогда возникает проблема!

Я пытаюсь использовать плагин jEditable для редактирования вновь созданных данных, но, поскольку вновь созданного div не было при загрузке документа, я создал событие .live, например: 

$("#editor").live('mouseenter', function(){
    $('.edt').editable(function(){
        console.log($(this).val());
    });
    $('.edtta').editable(function(){
        console.log($(this).val());
    }, {
        type: 'textarea'
    });
});

Теперь проблема заключается в следующем:

Когда я нажимаю на элемент .edt, плагин запускается, создает новый input и отображает в нем исходный текст, но, поскольку элемент .edt является новым, когда я пытаюсь опубликовать данные jEditable, он отображается как <h1 class="edt"> в консоли. <h1 class="edt"> является родителем поля ввода, созданного jEditable.

Может кто-нибудь указать мне правильное направление, как получить данные, которые я фактически ввел в поле ввода jEditable?

Большое спасибо!

1 Ответ

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

Если я не правильно понял ваш вопрос, вы пытаетесь получить введенные данные перед отправкой?Если это так, используйте метод onsubmit: 

      $('.edt').editable('@Url.Action('Edit', 'Home')', 
      {
        onsubmit: function (settings, data) {
            var input = $(data).find('input');
            var original = input.val();

            alert(original);
        }
      }

Вам нужно использовать .find () для получения ввода, тогда только значение можно получить с помощью .val (). Надеюсь, это поможет:)

...