Question

I have this code in HTML

<div class="details-content">
    <p class="biography user_fillable inline_editable" data-id="Biography"></p>
</div>

When the user clicks on the paragraph, it will change into a text field. And it is done via plugin.

Plugin code:

(function ($) {
    $.fn.inlineeditor = function (callback) {

        var $txt = $('<input type="text" class="inline-editor-text"/>');

        return this.each(function () {
            var $this = $(this);

            $this.on('click', function () {
                var _txt = $txt.clone().val($this.text()).insertAfter(this);

                $this.hide();
                _txt.select()
                    .on('keydown', function (e) {
                        if (e.which == '13') {
                            $this.text(_txt.val()).show();
                            _txt.remove();
                            if (callback) {
                                callback($this.text());
                            }
                        } else if (e.which == '27') {
                            $this.show();
                            _txt.remove();
                            if (callback) {
                                callback(null);
                            }
                        }
                    }).on('blur', function (e) {
                        $this.show();
                        _txt.remove();
                        if (callback) {
                            callback(null);
                        }
                    });
            });
        });

    };
})(jQuery);  

Usage:

<script>
    $(function(){

    var $inlineeditable = $('.inline_editable');

        $inlineeditable.inlineeditor(function (data) {
            var $this = $(this), id = $this.data('id');
            if (data != null) {
                alert(data);
                alert(id);
            }
        });

    });
</script>  

I can get the data, but not the ‘this’ object.
I want to get the ‘this‘ object, which is equivalent to:

<p class="biography user_fillable inline_editable" data-id="Biography"></p>

I am doing return this.each(function () { but it seems not to work.

Here is the sample

Answer 1

You need to explicitly set the this context when calling the callback. At the moment, since you’re not calling the function as a method of an object, the this context defaults to the global window object. Thus, $(this) in your callback becomes equivalent to $(window) – not exactly what you’d need.

You should call the callback using Function.call or Function.apply which accept the this context as first parameter, like so:

callback.call($this[0], $this.text());
callback.call($this[0], null);