Giriş metni değiştirme olayını yönetme

Question

Düzenlenebilir bir div benzetimi yapmak için jQuery eklentisi yazıyorum.

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

Şimdiye kadar, ben yapmak istiyorum, ve nasıl hiçbir ipucu var neyi this works oldukça iyi .. Şimdi

, gizli eğer div metin değişikliği yapmaktır:
İşte benim kodudur giriş değeri değişir. Ben div değişmelidir $('#editable').val('new text') ..

yaparsanız girdi değişikliği ben kontrol etmiyoruz diğer eklentileri içinde meydana çünkü
Means, ben önermek

Answer 1

Eklentinizde, val işlevini bu şekilde genişletebilirsiniz, böylece val işlevi kullanılarak değer değiştirildiğinde değişiklik olayı tetiklenir.

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

Answer 2

.., olay elle değişikliği tetikleyemez

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

:

Sonra böyle bir şey olacak: Plugins/Authoring - Namespacing açıklandığı gibi size jQuery eklentisi destek yöntemlerini yapmak

Sonra böyle kullanacak:

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

şiddetle jQuery üzerinde Plugins/Authoring - Namespacing 's makale okumanızı tavsiye ederiz.

---

GÜNCELLEME Ben soruyu anlamak bir hata yaptım beri, şu önerilen çözümler geldi. Bunu yapmanın en iyi yolu değil.

Eklenti tasarımınızı gözden geçirmenizi öneririz, çünkü bu, kişisel görüşümden erişilemez.

Ama ben bütün senaryo göremiyorum çünkü sen <div><input> düzenlemek için çift tıklayın zaman, üzerine yazıyorsunuz

Answer 3

, aşağıdaki kod parçası hile

(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 yapacak Bu hat ile giriş değeri:

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

.change() etkinlik ise tetiklemediyse (belirttiğiniz gibi), bu, harici eklenti tarafından, divunuzun "eski" içeriğiyle yapılan değişikliklerin üzerine yazdığınız anlamına gelir. Bu sorunu önlemek için .val()'u kaldırın. .change() tetikleme dış eklenti güvenerek alternatif olarak

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

, sen yoklama ile değerini kontrol edebilirsiniz. Olaylar mevcutsa bu önerilmez, oy verme aralığını makul bir şekilde ayarlarsanız çok büyük bir etkisi olmayacaktır. İnsanlarla bir formda veri girmeye çalıştığınız için, her 250 milisaniyeden daha sık anket uygulamanıza gerek olmadığını tahmin ediyorum.

Geçerli değeri kontrol eden ve değiştiyse .change()'u tetikleyen bir sarıcı için $("#editable").changePolling();'a bakın. Kodunuzu temel alan bir örnek için bkz. the forked jsfiddle.