I have some functions that are triggered when an element is clicked. The elements are stored in an array. But the value that trigger the functions change. Here is the code for the function:
// first I store the element of a list in an array
var promo = new Array(),
indexOfTheElement = 3;
$('#list li').each(function(){
promo.push($(this));
});
$(myArray[indexOfTheElement]).click(function(){
indexOfTheElement--;
// Do something
return false;
});
Edit: The element of a list are stored in an array, and the function is triggered when you click an element of the list. For example if you click the third element, the function will be triggered, and then it must work when you click the second.
It could be a scope issue, but I believe you want to use bind() and unbind() on each function call. For instance:
var foo = function(){
myArray[index].unbind("click");
index--;
//do something
myArray[index].bind("click", foo);
return false;
}
Inside you event handler unhook current event handler and set the new one, simply declare the function (not use an anonymous function) when you set the click().
$(myArray[indexOfTheElement]).click(doSomething);
function doSomething()
{
$(myArray[indexOfTheElement]).off("click", doSomething);
$(myArray[--indexOfTheElement]).click(doSomething);
return false;
}
try using live() and code inside $(document).ready()
$(document).ready(function(){
var promo = new Array(),
indexOfTheElement = 3;
$('#list li').each(function(){
promo.push($(this));
});
$(myArray[indexOfTheElement]).live('click',function(){
indexOfTheElement--;
// Do something
return false;
});
});
Related
I want to click a table element and to have it do x the first click and if clicked again perform Y
<td class='p' id='e1' onclick="myFunction2()"><img src='person2.png'/></td>
Thats what I have for my HTML for one click just now, but I wish to change that so that an item can be selected, then if clicked again for a deselect it would then trigger a different function.
I'm going to assume (you didn't say) that you want the function to be called to alternate with every click:
$('#e1').on('click', function() {
// retrieve current state, initially undefined
var state = $(this).data('state');
// toggle the state - first click will make this "true"
state = !state;
// do your stuff
if (state) {
// do this (1st click, 3rd click, etc)
} else {
// do that
}
// put the state back
$(this).data('state', state);
});
This uses jQuery's .data feature to store the button's click state in the button element itself.
Alternatively, you could use an external variable, but you should enclose the callback in a closure (in this case an immediately invoked function expression) to prevent the variable from becoming a global variable:
(function() {
var state;
$('#e1').on('click', function() {
state = !state;
if (state) {
// do this (1st click, 3rd click, etc)
} else {
// do that
}
});
})();
If the .on call and the state variable declaration are inside a jQuery document.ready handler that would have the same effect.
Pretty basic, let me know if this is close to what you want.
http://jsfiddle.net/WNJ75/6/
<div id="e1">Click Me</div>
.
(function() {
var click_track = 1;
$("#e1").click(function() {
if (click_track == 1)
alert("do something");
else if (click_track == 2) {
alert("do something else and reset click");
click_track = 0;
}
click_track++;
});
})();
demo: http://jsfiddle.net/HJwJf/
Link the toggle method with;
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
You could create a new atribute on the HTML element named, for example, "clickCount", and use it inside your event handler as a counter.
Let's say you have a button like this one:
<button data-click-count='0' onclick="myFunction(this)">My Button</button>
And you have a function like this:
function myFunction(elt) {
// Gets the clicks count
var count = $(elt).data("click-count");
// Adds one to the click counter
$(elt).data("click-count", ++count);
if (count == 1)
doSomething();
else if (count == 2)
doSomethingElse();
}
Every time you click the button, you'll see an alert with the number of clicks you've made.
You can use the same method and apply it to your case.
Using a state variable. The state variable will swap between the values 0 and 1 on each click. Making use of state we can execute the corresponding function in fn array.
<td class='p' id='e1'><img src='person2.png'/></td>
$("td#e1.p").each(function(){
var state = 1, fn = [myFunction1, myFunction2];
$(this).click(function(){
return fn[state = 1 - state].apply(this, arguments);
});
});
Also, it's preferably to use proper event binding than inline JavaScript.
If I have a regular toggle function bound to a click event
$('#work-content a').toggle(
function() {
// first click stuff
}, function() {
// second click stuff
}
);
But, I also need to bind $(document).click event to the second function somehow. My logic is probably off so I'm sure a new solution is necessary.
Functionality is 1) do something when link is clicked then 2) do the opposite when the link is clicked again or if the outside of the #work-content div is clicked.
Just extract the anonymous function and give it a name:
var thatFunction = function () {
...
}
$('#work-content a').toggle(
function() {
// first click stuff
},
thatFunction);
$(document).click(thatFunction);
the toggle function is used to hide/show your div and should not be used to maintain state of an event. just use another local variable for this and also define two functions perform your two different actions and pass the function pointer as callback to your event listener.
thus:
var linkClicked=false;
function fun1(){}
function fun2(){}
$('#work-content a').click(
function() {
if(!linkClicked)
fun1();
else
fun2();
});
$("body").click(function(){
if($(event.target).closest("#work-content")===null) //to make sure clicking inside your div does not trigger its close
{
fun2();
}
});
linkClicked = false;
$('#work-content .pic a').click(function(event) {
event.preventDefault();
var c = $(this);
if (!linkClicked) {
values = workOpen($(this));
} else {
workClose(c, values);
}
$('body').one('click',function() {
workClose(c, values);
});
});
This solution was exactly what I needed for what it's worth.
I hope it's stupid, but my head is today right overloaded:) I have this code and I need to store the pointer on the element which is clicked on and pass it to the callback function. Exactly is it a submit button and after correct ajax submit of the form I want to delete content of them. I've tried lot of these parent(),children(),.. combinations, but it does not work:
$("form :submit").click(function () {
var element = this;
$(this).ajaxSubmit(function(payload, element){
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
}
);
return false;
});
The problem is that element is also specified in your parameters for the callback, leave this out, like this:
$("form :submit").click(function() {
var element = this;
$(this).ajaxSubmit(function(payload) { //no element here in params
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
});
return false;
});
When it's in the parameters a more local element is defined, not what you set it to just before. I'm not sure if your relative .parent().children() call is correct (it could be .siblings(".addStatusTextArea") if it is) without seeing your markup...but your main issue is element not being what you want.
Remove the element parameter from the function passed to ajaxSubmit.
i.e.
$("form :submit").click(function () {
var element = this;
$(this).ajaxSubmit(function(payload){
$.nette.success(payload);
$(element).parent().children(".addStatusTextArea").val("");
hideMessage();
});
return false;
});
I have a jQuery tip function. I would like to create a button to turn on and turn off the function. I want it to be on by default.
Is it possible to create a link to turn on and off a function?
You can dynamically add and subtract event handlers with the bind and unbind functions.
$("#id").click( function() {
if ( HANDLER_IS_SET )
$("#button").unbind( "click");
else
$("#button").bind( "click", myEventHandlerFunction );
}
You can set a boolean to check if it's on or off, or bind and unbind a function.
var isOn = false;
$("#button").click(function(){ isOn = !isOn; });
$("#executebutton").click(MyFunction);
function MyFunction()
{
if (!isOn) return;
// do stuff
}
or
$("#button").click
(
function()
{
if ($("#executebutton").data("events").click != undefined)
$("#executebutton").unbind("click");
else
$("#executebutton").bind("click", MyFunction);
}
);
A little more info is needed, but you could use a global variable to toggle an if statement within the function so it doesn't execute anything, but the function will still be called.
I have been using the following method for adding a click event to an id, I was wondering if I could do the same with a class.... I have a number of items (which are created in a for each loop) and I need to be able to click them and then pickup which was clicked... here is my existing code
$('submit-button').bind('click', submit_click);
function submit_click() {
alert('I am clicked');
}
I was wondering if there is some way to pass in a variable into my function for the click so i can check the ID?? or similar
hence this
function submit_click(element) { // notice element
alert(element + ' clicked');
}
Any help really appreciated
Thank you
EDIT
I have tried the following and in debug "elem" is undefined...
$('.clear').bind('click', clear_click($(this)));
function clear_click(elem)
{
alert(elem.attr("id"));
}
WORKING SOLUTION
I have the working solution but I don't fully understand why, I would love to know why it works..
First of all I tried
$('.clear').bind('click', clear_click($(this)) );
This seemed to work "BUT" when I loaded the page it enter the "clear_click" method without being clicked - strange...
Then I tried this..
$('.clear').bind('click', function() { clear_click($(this)) } );
This works great! But I don't understand why I must pass a function and then within this function call my clear_click.
Can anyone explain why 1 works and the other doesn't?
Whenever I need to call a callback function or similar I should first open a function() and then call the method inside the function?
$(".yourclass").click ( function() {
$(this).attr ( "id" ); //S(this) returns the current element
});
and you can code like this
$('.yourclass').bind('click', function() { submit_click($(this)) });
function submit_click(elem)
{
alert ( elem.attr ("id" ) );
}
Edit
$('.clear').bind('click', function() { clear_click($(this)) });
function clear_click(elem)
{
alert(elem.attr("id"));
}
This will work fine for you.
Update
To answer your second question:
You can bind a function as a second argument when using the click event, but you cant bind a function and apply arguments. On the other hand, there is no need to send this as an argument to the clear_click function since the this keyword inside the function refers to the element itself:
So this works in your case:
$('.clear').bind('click', clear_click);
function clear_click() {
alert(this.id);
}
Sending this as an argument is not needed and bad coding:
$('.clear').bind('click', clear_click(this));
In the event handler, the first argument is the event object. You can extract the clicked element from that object using currentTarget or target. In jQuery, this always refers to the currentTarget in the event handler context:
var handler = function(e) {
var id = this.id; // this == e.currentTarget
}
$('submit').click(handler); // .click(fn) is shorthand for .bind('click', fn)
More examples:
$('submit').bind('click', function(e) {
console.log(e.target) // the target that was clicked on
console.log(e.currentTarget) // the element that triggered the click
console.log(this) // the same as above
});
Just add $(this) to your function, You don't need to send any parameters because you are still in the context of the clicked element.
function submit_click() { // notice element
alert($(this).attr('id') + ' clicked');
}
When you bind a handler to a function, the clicked element will be the first argument
$('.submit-button').click(submit_click);
function submit_click(element){
//element is the .submit-buttom element
alert(element+' was clicked');
alert($(element)+' was clicked');
}
This should work:
$('.submit-button').bind('click', submit_click($(this)));
function submit_click(element) { // notice element
alert($(element).attr("id") + ' clicked');
}