Implementing $(this) in a jQuery plugin

Question

I've been looking for developing a long-click plugin to handle such an event in jQuery, and after much research, I've found the best method. I've created the plugin below. It is not a large file, but it covers what I need. There are some problems with it though...

$(function($) {
  var holdTimer;
  $.fn.longclick = function( handler, time ) {
    if(time == undefined) time = 500;
    return this.mouseup(function(){
      clearTimeout(holdTimer);
    }).mousedown(function(){
      holdTimer = window.setTimeout(handler, time);
    });
  };
  $.fn.longclick.defaultTime = 500;
}(jQuery));

Below, I have the page that tests it:

// some markup
<input type="button" name="button3" id="button3" value="1500ms">

// and... the script itself

$("#button3").longclick( function() {
  var initial_text = $("#button3").val();
  console.log( $(this) );
  var initial_id = $(this).attr("id"); console.log( initial_id);
  var initial_html = $(this).html(); console.log(initial_html);
  $("#button3").replaceWith('<input type="textbox" id="" value=' + initial_text + '>');
}, 1500);

Now, the problem of my plugin seems to be that it doesn't know what $(this) means. When I console.log the $(this) it return the window itself, not the button that I need... Also, initial_id and initial_html are undefined. How can I get this done?

UPDATE: The initial_html variable should be, in my case <input type="button" name="button3" id="button3" value="1500ms">. The jQuery.html() won't work as I expect by saying $(this).html(). How can I get the element's HTML?

change console log to alert. i.e. alert(initial_id) and alert(initial_html) — Harshal Patil, May 28 '14 at 06:42
Unless I'm missing something, your approach has a serious issue. What if I `mousedown` on a button then move my mouse off of that button and `mouseup`? Will this not fire a long-click when it shouldn't? — James Montagne, May 28 '14 at 20:24

adeneo · Answer 1 · 2014-05-28T06:51:55.187

2

Inside setTimeout the value of this is always the window, and you you're calling the callback from the scope of the setTimeout function.

$(function ($) {
    var holdTimer;
    $.fn.longclick = function (handler, time) {
        return this.on({
            mouseup : function () {
                clearTimeout(holdTimer);
            },
            mousedown : function () { 
                var self  = this;
                holdTimer = window.setTimeout(function() {
                    handler.call(self);
                }, time || $.fn.longclick.defaultTime);
            }
        });
    };
    $.fn.longclick.defaultTime = 500;
}(jQuery));

You have to get the element the event handler is working on, otherwise the callback will apply to all elements, see this FIDDLE for an example on how that would not work.

edited May 28 '14 at 06:51

answered May 28 '14 at 06:44

adeneo

312,895
29
395
388

2

It's not the same, this sets `this` in the callback to the element clicked, yours set `this` in the callback to the entire collection, and yours was just a codedump until you updated it, and I was a little slow testing in a fiddle to make sure this was the issue, and writing a proper answer. – adeneo May 28 '14 at 06:46
@adeneo What's the use case of setting the `self` in the callback of `mousedown`? – Ionică Bizău May 28 '14 at 06:59
@IonicãBizãu - Uhm, affecting only the current element, and not all of them would be the use case I suppose ? – adeneo May 28 '14 at 07:02

Ionică Bizău · Accepted Answer · 2014-05-28T07:15:13.440

When you do setTimeout(handler, time) the handler will be called from window (this will be equal with window).

So, when you init the plugin instance you have to save this into a $self (it's a jQuery object). Then instead of setTimeout(handler, time) you have to do:

holdTimer = window.setTimeout(function () {
    handler.call($self);
}, time);

The edited plugin is:

$(function($) {
  var holdTimer;
  $.fn.longclick = function( handler, time ) {
    var $self = this;
    if(time == undefined) time = 500;
    return this.mouseup(function(){
      clearTimeout(holdTimer);
    }).mousedown(function(){
        holdTimer = window.setTimeout(function () {
            handler.call($self);
        }, time);
    });
  };
  $.fn.longclick.defaultTime = 500;
}(jQuery));

Regarding the HTML of the old element, jQuery.html() takes the inner HTML. You need the outerHTML. So, you get it this way: $(this)[0].outerHTML.

var initial_html = $(this)[0].outerHTML;
console.log(initial_html); // <input type="button" name="button3" id="button3" value="1500ms">

JSFIDDLE

Implementing $(this) in a jQuery plugin

2 Answers2