Событие смены текста ввода ввода

Question

Я пишу плагин jQuery для имитации редактируемого div.
Вот мой код:

(function($){ 
    $.fn.editable = function(){ 
     return this.each(function(){ 
      var $this = $(this).hide(); 
      var div = $('<div>'+$this.val()+'</div>').show().insertAfter($this).data('input',$this); 

      $this.data('div',div); 

      div.dblclick(function(){ 
       $(this).hide(); 
       $(this).data('input').val($(this).text()).show(); 
      }); 
      $this.blur(function(){ 
       $(this).hide(); 
       $(this).data('div').html($(this).val()).show();     
      }); 

      $this.change(function(){ 
       $(this).data('div').html($(this).val());  
      }); 
     }); 
    }; 

})(jQuery); 

До сих пор this works довольно хорошо ..

Теперь, что я хочу сделать, и не имею понятия, как, чтобы сделать изменения ДИВА текста, если скрытым изменение входных значений.
Значит, если я $('#editable').val('new text') DIV должен изменить ..

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

Answer 1

Взгляните на это, в своем плагине вы можете расширить функцию val таким образом, чтобы событие изменения активировалось при изменении значения с помощью функции val.

How to extend the val method so that the change event is triggered when val is called?

Answer 2

Я предлагаю вам сделать ваши методы поддержки плагин JQuery, как описано на Plugins/Authoring - Namespacing:

Тогда вы будете иметь что-то вроде этого:

(function($){ 

    var methods = { 

    init : function(options) { 
     return this.each(function() { 
     var $this = $(this).hide(); 
     var div = $('<div>'+$this.val()+'</div>').show().insertAfter($this).data('input',$this); 

     $this.data('div',div); 

     div.dblclick(function(){ 
      $(this).hide(); 
      $(this).data('input').val($(this).text()).show(); 
     }); 
     $this.blur(function(){ 
      $(this).hide(); 
      $(this).data('div').html($(this).val()).show();     
     }); 
    }, 

    value : function(str) { 
     return this.each(function(){ 
     $(this).val(str); 
     $(this).data('div').html($(this).val()); 
     }); 
    } 
    }; 

    $.fn.editable = function(method) { 

    // Method calling logic 
    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.editable'); 
    }  

    }; 

})(jQuery); 

Тогда вы будете использовать его как это:

$('#editable').editable('new value that will sync the related div'); 
// instead of `$('#editable').value('...')` 

Я настоятельно рекомендую вам прочитать статью Plugins/Authoring - Namespacing «s на JQuery.

---

UPDATE Поскольку я сделал ошибку, понимание вопроса, я пришел со следующими предлагаемыми решениями. Это не лучший способ сделать это.

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

Но, так как я не могу видеть весь сценарий, следующий фрагмент кода будет делать трюк

(function() { 

    // Store the original jQuery.val() 
    var $$val = $.fn.val; 

    // Add a hook. 
    $.fn.val = function(s) { 

     // Call your plugin change event. 
     $(this).editable('change'); 

     // Delegate to the original jQuery.val function. 
     return $$val.apply(this, Array.prototype.slice.call(arguments)); 
    }; 

    // Your plugin stuff... 
}) 

HTH

Answer 3

При двойном нажатии кнопки <div> для редактирования <input>, перезаписи значение ввода с этой линией:

$(this).data('input').val($(this).text()).show(); 

Если событие .change() (как вы указываете), это означает, что вы перезаписываете изменения, внесенные внешним плагином, с «старым» содержимым вашего div. Удалите .val(), чтобы избежать этой проблемы.

$(this).data('input').show(); 

В качестве альтернативы, опираясь на внешний плагин запускающего .change(), вы можете проверить значение путем опроса. Хотя это не рекомендуется, если события доступны, это не будет иметь большого влияния, если вы установите интервал опроса достаточно. Поскольку вы имеете дело с людьми, вводящими данные в форму, я предполагаю, что вам не нужно проводить опрос чаще, чем каждые 250 миллисекунд.

См. $("#editable").changePolling(); для обертки, которая проверяет текущее значение и триггеры .change(), если он изменился. См. the forked jsfiddle для примера, основанного на вашем коде.