Click Event on scoreboard headers - Better Battlelog Forums #147443

Sitemap
Topicstarter
Hello together.
At first, I'm very new to javascript and jquery at all and it's my first time using bblog as a dev.

I want to define a click event on every row on the scoreboard table, but I don't know at which part of the plugin I have to define this part of the code.
If I put it in init function the click event wouldn't raise always, because I maybe haven't loaded the page from a serverpage with scoreboard.
And if I define it in domchange the function gets called multiple times (3-6 times).

Here the code I'm currently using:
domchange : function(instance){
$("#server-players-list table thead th").click(function() {
var rowIndex = $(this).index();
alert("Index of row: " + rowIndex);
});
}

I would really appreciate your help :)
Thx in advance.
Domchange is the right place, but you need to do some checks.
First check if you are on the right page, using window.location.href.match for example.
Secondly, you should prefix your click event by using that for example $("xyz").on("click.myprefix").
At third, unbind any of your previously attached click events everytime the domchange triggers, that prevent you from multiple bindings.

All in all could be something like this
domchange : function(instance){
if(window.location.href.match(/correct\/page\/url/)){
$("#server-players-list table thead th").off(".myprefix").on("click.myprefix", function() {
var rowIndex = $(this).index();
alert("Index of row: " + rowIndex);
});
}
}
Topicstarter
BrainFooLong wrote:
Domchange is the right place, but you need to do some checks.
First check if you are on the right page, using window.location.href.match for example.
Secondly, you should prefix your click event by using that for example $("xyz").on("click.myprefix").
At third, unbind any of your previously attached click events everytime the domchange triggers, that prevent you from multiple bindings.

All in all could be something like this
domchange : function(instance){
if(window.location.href.match(/correct\/page\/url/)){
$("#server-players-list table thead th").off(".myprefix").on("click.myprefix", function() {
var rowIndex = $(this).index();
alert("Index of row: " + rowIndex);
});
}
}


thx man :), working great.
Topicstarter
So, now I would like to have something like a domchange event on a special element.
On stackoverflow I found this:
http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242

And it told me, that I should use "DOM4 Mutation Observers". Also it said that only modern browsers are supporting this.
So I have a short question, can I use this for bblog?
Anyone maybe have a better approach for the "domchagne" event?
var mutationHandler = function(mutations){
// onchange code
};
var observer = null;
if(typeof WebKitMutationObserver != "undefined"){
observer = new WebKitMutationObserver(mutationHandler);
}else if(typeof MutationObserver != "undefined"){
observer = new MutationObserver(mutationHandler);
}
observer.observe(document.body, { childList: true , subtree : true});

That is save to use, bblog uses the same technique for the domchange of the whole body.