Geek asks and answers

Input Text Change Event

I am writing a jQuery plugin for modeling an editable div.
Here is my code:

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

So far, this works pretty well.

Now, what I want to do, and don’t know how to do it, is change the text of the div if the hidden input value changes.
So if I do $('#editable').val('new text'), the div should change.

I can not trigger the change event manually, because input change will occur in other plugins that I do not control.

+5
source share
3 answers

Take a look at this, in your plugin you can extend the val function so that the change event is fired when the value is changed using the val function.

val , val?

+3

<div> <input> :

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

.change() ( ), , , , "" div. .val(), .

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

.change(), . , , , . , , , , 250 .

$("#editable").changePolling(); , .change(), . . jsfiddle , .

+2

jQuery, / - :

- :

(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 jQuery.

UPDATE . Since I made a mistake understanding this question, I came up with the following proposed solutions. This is not the best way to do this.

I highly recommend that you review your plugin design because it is not available in my personal opinion.

But since I don't see the whole script, the following code snippet will do the trick

(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...
})

NTN

-2
source

More articles:


All Articles