CODEWITHSUNDEEP
javascriptjquery
marcusds
marcusds

Reputation: 794

jQuery events: disable namespaces (or use an event with a period in the name)

I am trying to use .one() to bind to an event with the name similar to something.else.thing, I am not able to change the event name since it comes from an external library.

The problem is because of the periods, jQuery creates namespaces, else and thing for the event something instead of creating an event named something.else.thing.

Is there any way around this?

Thanks

Edit:

Some example code:

$(document).on('appfeel.cordova.admob.onAdLoaded', function() {
    console.log('Does nothing');
});

document.addEventListener('appfeel.cordova.admob.onAdLoaded', function() {
    console.log('Works');
});

Upvotes: 2

Views: 274

Answers (2)

marcusds
marcusds

Reputation: 794

Here is how I decided to go about solving this issue. I went about it this way because this way allows me to continue to use jQuery and all the functionality it provides while keeping my code consistent and only requires a few lines of extra code to go about.

$(document).one('somethingElseThing', function() {
    console.log('Event!');
});
document.addEventListener('something.else.thing', function() {
    $(document).trigger('somethingElseThing');
});

What I am doing is using straight JavaScript to create an event listener for the event with a period in the name and then I have it trigger a custom event that doesn't a have a period so that I can continue to use jQuery. This I believe is an easy straightforward approach.

Upvotes: 1

AtheistP3ace
AtheistP3ace

Reputation: 9691

I don't think you can disable jQuery event namespacing so if you want to use one on an event with dots in it you can just do this in pure JS:

Fiddle: http://jsfiddle.net/AtheistP3ace/8z6ewwnv/1/

HTML:

<div id="test"></div>
<button id="mybutton">Run event again</button>

JS:

var test = document.getElementById('test');
var button = document.getElementById('mybutton');
var event = new Event('something.else.blah');

function onWeirdEvent () {
    test.removeEventListener('something.else.blah', onWeirdEvent);
    alert('did it');
}

test.addEventListener('something.else.blah', onWeirdEvent, false);

test.dispatchEvent(event);

button.addEventListener('click', function (e) {
    test.dispatchEvent(event);
}, false);

Its essentially the same thing. If you really want everything to seem jQuery-ish create a custom plugin:

Fiddle: http://jsfiddle.net/AtheistP3ace/8z6ewwnv/2/

$.fn.customOne = function (eventString, fn) {
    var self = this[0];
    var origFn = fn;
    fn = function (event) {
        self.removeEventListener(eventString, fn);
        return origFn.apply(self);
    };
    self.addEventListener(eventString, fn, false);
};

$.fn.customTrigger = function (eventString) {
    var event = new Event(eventString);
    var self = this[0];
    self.dispatchEvent(event);
}

$('#test').customOne('something.else.blah', function () {
    alert('did it');
});
$('#test').customTrigger('something.else.blah');
$('#test').customTrigger('something.else.blah');

Upvotes: 1

Related Questions