हैंडल इनपुट टेक्स्ट चेंज इवेंट

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 पाठ परिवर्तन करने के लिए करता है, तो छिपा हुआ है:
यहाँ मेरी कोड है इनपुट मूल्य परिवर्तन।
मतलब, मैं परिवर्तन घटना मैन्युअल को गति प्रदान करता है, तो मैं $('#editable').val('new text') div बदलना चाहिए ..

नहीं कर सकते, क्योंकि इनपुट परिवर्तन अन्य प्लग इन मैं नियंत्रण नहीं के भीतर हो जाएगा ..

Answer 1

इस पर एक नज़र डालें, अपनी प्लगइन में आप इस तरह के वैल फ़ंक्शन का विस्तार कर सकते हैं ताकि वैल फ़ंक्शन का उपयोग करके मूल्य बदल दिया गया हो।

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

:

तो फिर तुम कुछ इस तरह होगा: यदि आप अपने jQuery प्लगइन समर्थन तरीकों Plugins/Authoring - Namespacing पर वर्णित के रूप में बनाने के लिए

तो फिर तुम इसे इस तरह का उपयोग करेगा:

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

मैं दृढ़ता से Plugins/Authoring - Namespacing के jQuery पर लेख पढ़ने के लिए सुझाव देते हैं।

---

अद्यतन जब से मैं सवाल समझ एक गलती की है, मैं निम्नलिखित प्रस्तावित समाधान के साथ आया था। यह करने का सबसे अच्छा तरीका नहीं है।

मैं दृढ़ता से आपको अपने प्लगइन डिज़ाइन की समीक्षा करने की सलाह देता हूं, क्योंकि यह मेरी व्यक्तिगत राय में उपलब्ध नहीं है।

लेकिन,

Answer 3

जब आप दोगुना <div><input> संपादित करने के लिए क्लिक करें, आप अधिलेखित कर रहे हैं के बाद से मैं पूरी परिदृश्य नहीं देख सकते हैं, कोड का निम्न भाग चाल

(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 करना होगा इस लाइन के साथ इनपुट के मूल्य:

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

तो .change() घटना ट्रिगर नहीं किया गया है (जैसा कि आप इंगित करते हैं), इसका मतलब है कि आप बाहरी प्लगइन द्वारा किए गए परिवर्तनों को अपने div की "पुरानी" सामग्री के साथ ओवरराइट कर रहे हैं। उस समस्या से बचने के लिए .val() हटाएं।

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

बाहरी प्लगइन .change() ट्रिगर पर भरोसा करने के लिए एक विकल्प के रूप में, आप मतदान द्वारा मूल्य देख सकते हैं। यदि घटनाएं उपलब्ध हैं तो इसकी अनुशंसा नहीं की जाती है, यदि आप मतदान अंतराल को उचित रूप से सेट करते हैं तो इसका कोई बड़ा प्रभाव नहीं पड़ेगा। चूंकि आप किसी रूप में डेटा दर्ज करने वाले मनुष्यों से निपट रहे हैं, इसलिए मुझे लगता है कि आपको हर 250 मिलीसेकंड से अधिक बार मतदान करने की आवश्यकता नहीं है।

$("#editable").changePolling(); एक रैपर के लिए देखें जो वर्तमान मान की जांच करता है और अगर यह बदल गया है तो .change() ट्रिगर करता है। अपने कोड के आधार पर उदाहरण के लिए the forked jsfiddle देखें।