Is it possible to listen to ALL events of one basic event if the events are namespaces?
Example:
$elmt.bind("change", function (event) {
console.log(event);
});
$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");
This only works if I bind to the full event names but this is what I don't know on this position :(
You can, but it's not perfect.
For example:
function eventHandler(event){
$("#output").html($("#output").html() + "<br />" + event);
}
$elmt = $("#elmt");
$elmt.bind("change.namespace1", eventHandler);
$elmt.bind("change.namespace2", eventHandler);
$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");
You need to extract the namespace from the event and switch on that though, as both namespaces are fired for the basic "change" event which almost means you need to use "only" namespaces, or no namespaces.
I hope this helps a bit.
Cross-posting from Bind to all namespaces of custom jquery event
Try triggerAll instead of trigger:
(function($) {
$.fn.triggerAll = function(topics, data, delimiter) {
return this.each(function() {
var $this = $(this), chain = [], t = '';
delimiter = (delimiter || '.');
// rebuild chain
$.each(topics.split(delimiter), function(i,n) {
t += (i == 0 ? '' : delimiter) + n;
chain.push(t);
});
// append/prepend original topic?
data = (data || []);
data.push(topics);
$.each(chain, function(i,t) {
$this.trigger(t, data);
});
});
};
})(jQuery);
Granted, due to how jQuery handles triggering namespacing, triggering the "root" event actually fires the namespaced versions, so to get what you expect you'd need to use another character for the delimiter, like /, and then declare your events like:
var $o = $('#whatever');
// this will be triggered for all events starting with 'root'
$o.on('root', function () { console.log(Array.prototype.slice.call(arguments, 0)); });
// some arbitrary way to fire custom events
$o.on('click', function () {
$o.triggerAll('root/custom1/subA', ['1st', '2nd'], '/');
$o.triggerAll('root/custom2', [3, 4, 5], '/');
});
This is what I have used to compare existing theme on each li element and replace with new custom theme.....
$('li').each(function(index) {
var oT = $(this).attr('data-theme');
var li_item = $(this).attr(index);
$('#li_item ').mousedown(function() {
if(oT=='a')
{
$(this).removeClass('ui-btn-up-' + a').addClass('ui-btn-up-' + 'c').attr('data-theme', 'c');
}
});
$('#li_item ').mouseup(function() {
if(oT=='c')
{
$(this).removeClass('ui-btn-up-' + 'c').addClass('ui-btn-up-' + 'a').attr('data-theme', 'a');
}
});
});
