Question

I am writing a jQuery plugin to simulate 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 have no clue how, is to make the div text change if the hidden input value changes.
Means, if I do $('#editable').val('new text') the div should change..

I cannot trigger change event manually, because the input change will occur within other plugins that I don’t control..

Answer 1

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

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