How could I find in jQuery what events are bound with live for a particular element?
Say I have a function, randomFunction, that returns a random function from an array of functions. How can I find which function has been bound to a certain element?
var arrayOfFunctions = []; //a whole bunch of functions
function randomFunction(array){}; //returns one of those functions
$('#certain_element').live('click', randomFunction(arrayOfFunctions));
What is the index of the array that corresponds to the function that was bound by live for $('#certain_element')?
Alright, figured it out.
For a click event, for $('#certain_element'), logging each binding's index to the console:
var relevantHandlers = $.map($(document).data('events').live, function(value){
if(value.origType == 'click' && value.selector == '#certain_element'){
return value.handler;
}
}; //all handlers for #certain_element bound to click by live.
$.each(relevantHandlers, function(){
console.log("the index is: " + $.inArray(this, arrayOfFunctions));
});
Take a look at this plugin. When I last used this, there was a need to slightly modify it for the then latest version of jQuery, but it should give you a direction.
There's a nifty bookmarklet called Visual Event that shows the code that will be called.
But since you're truly calling a random function, maybe doing something as simple as including an alert("function name") or colsone.log("function"), if you're just testing.
Related
The title really explains most of it, but basically, this should alert when I get the click the element, but it doesn't. It also does work when I put the alert() outside of the if, and in the beginning of the jquery on click. Here's my code:
var hasClickedWelcome = 0;
//Onclick event
$(".menu-welcome" ).click(function() {
var welcomeButton = document.getElementByClassName("menu-welcome");
if(hasClickedWelcome == 0) {
alert("hello");
$(".menu-welcome").addClass("menu-welcome-clicked");
hasClickedWelcome = 1;
} else {
welcomeButton.classList.remove("menu-welcome-clicked");
hasClickedWelcome = 0;
}
});
Your if statement has no meaning
if(hasClickedWelcome == hasClickedWelcome)
This will always return true, you'll always hit this code no matter what:
alert("hello");
$(".menu-welcome").addClass("menu-welcome-clicked");
hasClickedWelcome = 1;
Therefore, you have a clear logic problem.
Edit: See Daniel Beck suggestion on comments section
Initially, you have syntactic error, there is no inbuild function like document.getElementByClassName() (unless its your custom function), so clearly even if you put your alert in beginning of click it won't work.
Also, you are checking if(hasClickedWelcome == hasClickedWelcome) which does not make sense.
Use: document.getElementsByClassName("menu-welcome"); to get array of nodes having the class. Then, rest of your logic accordingly.
//Onclick event
$(".menu-welcome" ).click(function() {
// in jQuery "this" refers to the element that was selected in a callback
// it looks like toggleClass is really what you're looking for
$(this).toggleClass("menu-welcome-clicked");
});
I'm trying since yesterday with my js code but it still doesn't work. So I have a select list, when I change the selected option it calls an onchange event that calls a DWR function.
The problem is the DWR function takes a while and resets my select options (the first element selected instead of the one selected), I tried to set the previous value but it works only when I add a while loop.
var valeurTypeUo = document.getElementById('selectElement').value;
// DWR function called by this function
forme.getOptions(params);
// console.log(document.getElementById('typesUoChoix').value) is empty String
while (document.getElementById('typesUoChoix').value != valeurTypeUo)
document.getElementById('typesUoChoix').value = valeurTypeUo;
This is my code, it works but there is always an alert if I want to stop the script. Is there any way to replace this while instruction?
You can use setInterval which you can clear instead of while.
Your code can be like:
var stopCheking = false;
var checkingInterval; // interval holder
var valeurTypeUo = document.getElementById('selectElement').value;
// DWR function called by this function
forme.getOptions(params);
// console.log(document.getElementById('typesUoChoix').value) is empty String
checkingInterval= setInterval( function() {
if( stopCheking ) clearInterval(checkingInterval);
}, 2);
When you want to stop the event (interval) in this case, you set the stopCheking flag to true.
You can "pause" functions with ES6 generators(yield keyword), but normally you should not need it in this case. Plain callback on the async call should do it.
Anyways here is the link for generators: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
Merry Christmas, everyone !
I have to updatethe events for joint.shapes.uml.State element, which is introduced by JointJS library, after some events are triggered. I use the set('events', events) function. I print the element to the console, and find the element's events has already been updated. But the events shown on the graph haven't changed. The sample code can be accessed at:
http://jsfiddle.net/GJH_ICT/6pmbQ/5/.
You can drag the end of a link to trigger events. This is the update function:
function resetEvents(id, old, newer) {
var events = graph.getCell(id).get('events');
for(var i = 0; i < events.length; ++i) {
events[i] = events[i].replace(old, newer);
}
graph.getCell(id).set('events', events);
console.log(graph.getCell(id).get('events'));
}
Besides, I have noticed the updateEvents() function in joint.shapes.uml.State element, and tried that function, but it does not work fine. What does this function do?
Thanks!
This is because you're changing the events array in place. When you call .set() later on, the internal mechanism of set() thinks it is exactly the same object - the reference is the same - in other words, the === operator between the object passed and the one that has been previously stored returns true.
Neither this nor that works. Does anyone know what is going on??
Edit:
qwerty is simply called as "qwerty();" when in other pieces of code.
It is supposed to be indepedent.
Edit: I realize what is wrong. The problem lies with the i...
function qwerty () {
..... for loop that changes i ......
var that = this;
this.chara[i] = createlabel.....
this.chara[i].addEventListener('click', function(e) {
var j = e.source.id;
alert("hello word");
alert(this.chara[j].width); // I get the error here
});
this.chara[i].addEventListener('doubleclick', function(e) {
alert("hello word");
alert(that.chara[i].width); // I get the error here too.
});
}
Any JS problem relating to this is likely due to the way the function using this is called. Storing a reference to this in your that variable should let you reference it from within your nested functions, exactly the way you are doing it already - assuming that qwerty() is called in a way that sets this to the correct object in the first place. (Personally I like to call such a variable self since it more accurately reflects what the variable is doing.)
However, in your function you say you get the error on this line:
that.chara[i].width
Given that you say this.chara[i].addEventListener(...) I'm guessing that the chara[i] variable holds a reference to a DOM element. If that is the case I'm guessing it is an element type that doesn't have a width property. Try this:
that.chara[i].style.width
https://developer.mozilla.org/en/CSS/width
That's the best I can do for you without more information about what error you're getting and how the qwerty() function is called...
I'm trying to do some things in order, and I'm having some trouble.
When the button with the id #sub_button is clicked,
Make sure each element with class ".verify" has it's own object value (see code)...
... if not, blur that element (will run some other code and create an object for it).
AFTER the above IF check is COMPLETE (now all elements should have an object), THEN run function "isitgood". (The "isitgood" function is running before all elements get their object values, which is done on blur)
$("#sub_button").click(function() {
$(".verify").each(function(){
objtitle = $(this).attr('id');
if (!myObj[objtitle]) {
$("#"+objtitle).blur(); // Define anything undefined
}
}); // end each
isitgood();
}); // end click function
function isitgood(){
if (myObj.login_id == "ok" && myObj.email == "ok") {
// submit the form
} else {
// shows error
}
}
Also, once I get this executing in the right order, it would be nice to do some sort of .each loop to check if all the object values == "ok" instead of specifying all of them in the function. All of the names of the objects (ie. login_id, email) are the ID attr of any element with class name .verify.
Well, you could do a quick index check in the click callback:
var sub_buttons = $("#sub_button");
sub_buttons.click(function() {
$(".verify").each(function(index){
objtitle = $(this).attr('id');
if (!myObj[objtitle]) {
$("#"+objtitle).blur(); // Define anything undefined
}
if (index == sub_buttons.length - 1)
isitgood();
}
}); // end each
}); // end click function
This will check if you're on the last element in the jQuery object, and if so, will run the isitgood() function. This way, you make sure that you're finished with the $.each method before executing isitgood()
Javascript is asynchronous. Your isitgood() will always fire while .each is still doing it's thing.
That said from your code it's not clear what you're trying to accomplish. The way you're using .each seems to indicate that you have multiple of the same ID attributes on your tags. That won't work, IDs have to be unique. Also you seem to be mixing jQuery and regular Javascript. Use one or the other. Actually just use jQuery, you'll save yourself time and effort!
If you do have unique ids then you shouldn't need the .each at all. Just check the appropriate ids with your if statement.
Please provide more of your code and i can update this with a better answer. For instance what does your myObj look like? How do elements of it get the value of ok? It doesn't seem to get set within your call to .each().