Best way to use .on() into a jquery plugin?

Question

I would like to create a jquery plugin for my website.

I will create events, and I would like to know what is the best way to deal with handlers.

My worries are that when the DOM html change due to an ajax query, we have to keep the events bind. After some researches I found that the best way is to use the .on() function, available in jquery.

Here is what I have tried :

jQuery.fn.wtpicker = function ( params ) {
    var currentSelector = $(this);

    $(document).on('click', currentSelector, function(event) {
        alert('test');
    });

    return this;
}

But it does not work...

live() is deprecated, classic bind d.click() don't work if changing dynamically the HTML with ajax queries... well I'm lost.

I am supposed to specify the dom of the selector, like "#whatever div.myclass" in the second argument. But as it is a plugin I can't know it.

To make it work I'm forced to write :

jQuery.fn.wtpicker = function ( params ) {
    var currentSelector = $(this);

    $(document).on('click', '#whatever div.myclass' , function(event) {
        alert('test');
    });

    return this;
}

But it's not really efficient if I wan't another selector.

Is that possible to retrieve witch DOM selector was used in the plugin himself ? I don't want to pass a param with the dom. It's not really a good method.

Thanks a lot

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

If you want the selector and not the selected elements try .selector

jQuery.fn.wtpicker = function ( params ) {
    var currentSelector = this.selector;

    $(document).on('click', currentSelector, function(event) {
        alert('test');
    });

    return this;
}

From the comments below .selector cannot be relied upon to give a valid selector, It is also deprecated in jQuery 1.7 and removed in jQuery 2.0

edited May 23 '17 at 10:25

Community

1
1

answered Apr 14 '13 at 17:05

Musa

96,336
17
118
137

2

+1 but please note that `.selector` is [deprecated and no longer available in jQuery v2.0+](http://api.jquery.com/selector/). – Mottie Apr 14 '13 at 17:11
Thank you Musa you made my day! @Mottie why ??? And what isthe alternative than ? – David Vander Elst Apr 14 '13 at 17:13
1

@DavidVanderElst "Plugins that need to use a selector should have the caller pass in the selector as part of the plugin's arguments during initialization." It's just not reliable anyways...read Mottie's link. – Ian Apr 14 '13 at 17:14
1

@DavidVanderElst basically all you need to do is pass in your selector as one of the function `params`. – Mottie Apr 14 '13 at 17:15
1

@Musa: Do not use `selector` as it will not always hold the value you expect it to have. I have asked a question in regards to the `selector` property in the past and it turned out that `selector` is a property only used internaly in jQuery and is not reliable at all. See [**Why does the .selector property in jQuery not store a valid selector value?**](http://stackoverflow.com/questions/12426622/why-does-the-selector-property-in-jquery-not-store-a-valid-selector-value) – Nope Apr 14 '13 at 17:35

Best way to use .on() into a jquery plugin?

1 Answers1