ハンドル入力テキスト変更イベント

Question

編集可能なdivをシミュレートするjQueryプラグインを作成しています。今

(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かなりよく..

、私が何をしたいのか、そして隠された場合のdivのテキストの変更をすることですか、見当もつかない：ここでは
は私のコードです入力値が変化します。私はdiv要素を変更する必要があります$('#editable').val('new text') ..

をすれば入力の変化が、私がコントロールしていない他のプラグイン内で発生するので、
手段、私は私が提案し

Answer 1

これを見て、あなたのプラグインで、val関数を使って値が変更されたときにchangeイベントがトリガーされるように、このようなval関数を拡張することができます。

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

Answer 2

..イベント手動変更をトリガすることはできません

その後、あなたはこのようなものがあります：

(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); 

をPlugins/Authoring - Namespacingに説明するように、あなたのjQueryプラグインのサポート方法を作るためにあなた

そして、あなたはこのようにそれを使用します。

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

私は強くjQueryの上Plugins/Authoring - Namespacingさんの記事を読んですることをお勧めいたします。

---

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

あなたが<input>を編集する<div>をダブルクリックすると、あなたが上書きされていることを行いますこの行の入力の値：

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

.change()イベント（指定したとおりに）トリガーされていない場合は、外部プラグインによる変更をdivの「古い」コンテンツで上書きしていることを意味します。この問題を回避するには.val()を削除してください。 .change()をトリガ、外部プラグインに頼るの代替案として

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

、あなたはポーリングして値を確認することができます。イベントが利用可能な場合は推奨されませんが、ポーリング間隔を合理的に設定すると大きな影響はありません。あなたは人間がデータをフォームに入力することを扱っているので、250ミリ秒ごとより頻繁にポーリングする必要はないと推測しています。

現在の値をチェックし、変更された場合は.change()をトリガーするラッパーについては、$("#editable").changePolling();を参照してください。コードに基づく例については、the forked jsfiddleを参照してください。