There is the following JS:
for (var catId in this.data.categories) {
(function (catId) {
$("li#tsCat-" + catId).click(function (event) {
$(this).addClass("tax-active");
event.stopPropagation();
})
}(catId))
for (var floor in this.data.floors) {
(function (floor, catId) {
var selector = "#tsCatFloor_" + catId + "_" + floor;
$(selector).on("click", function (event) {
$(this).addClass("active-filt");
event.stopPropagation();
});
}(floor, catId));
}
}
This code forms two level list.
On clicking links on 1st level, it executes correct click handler $("li#tsCat-" + catId).
But on clicking 2nd level it again executes 1st handler $("li#tsCat-" + catId).
It needs to execute 2nd handler $(selector).
Where is the problem?
Sorry, I didn't provided the full view, but what is good I found a solution what could be useful for everyone:
If You're adding .click() event be sure, that You put the data (against which .click is called) already to DOM. Otherwise .click will never be called.
Related
jquery function not firing when I use dataTable.fnAddData to append the HTML string.
So I have a function populateDataTable(), there are two columns I needed to render an icon instead of data from JSON.
Hence, I tried to like appending the HTML string including classes for the element in fnAddData(). But somehow it's not firing the click event on the icon.
function populateDataTable(data) {
$("#customerTable").DataTable().clear();
var length = Object.keys(data).length;
for(var i = 1; i < length+1; i++) {
var index = i - 1;
var name = data[index].name;
var queue = data[index].queue;
var expire = data[index].expire;
$('#customerTable').dataTable().fnAddData( [
i,
name,
queue,
'<td id="tb-manage-key" class="tb-manage-key"><div class="tb-btn manage-key-btn switch-view" data-hide="manageCustomers" data-title="#Resources.ManageKeys" data-target="manageKeys"><span></span></div></td>',
'<td class="tb-manage-subs"><div class="tb-btn manage-subs-btn switch-view" data-hide="manageCustomers" data-title="#Resources.ManageSubscriptions" data-target="manageSubscriptions"><span></span></div></td>',
expire,
name
]);
}}
$('.tb-btn.switch-view').on('click', function(e) {
e.preventDefault();
switchView(this);
console.log('Testing'); //not firing
});
Icon is showing, but not firing click event as it supposed to be. Attached below shows that we can see it appends the div as expected.
Solutions
Adding the click event within the populateDataTable() works.
$('#customerTable tbody').on('click', '.tb-btn.switch-view', function() {
switchView(this);
});
You can try a different syntax to listen to the click event...
$('td').on('click', '.tb-btn.switch-view', function(e) {
e.preventDefault();
switchView(this);
console.log('Testing'); //not firing
});
Is there a reason this won't work? It works the first time, the variable gets updated (and I can see it), yet it doesn't work on anything after the first one.
$(document).ready(function($) {
var question = 1;
$("ul#question"+question+" li").on( "click", function(e) {
$(this).addClass("test" + question);
question++;
});
});
What I'm trying to do is use the same button actions for 6 different buttons. It has to be this way so that I can use off() on each one, separately, as I go.
Otherwise I have to write the same code out 6 times. Perhaps there's a better way, I just don't understand why this isn't working.
Thanks
incrementing the variable will not change the selector of the event handler. You could use a class selector and then test the id in the event handler:
var question = 1;
$("ul.question li").on( "click", function(e) {
if ($(this).closest("ul").attr("id") === "question"+question) {
$(this).addClass("test" + question);
question++;
}
});
UPDATE
Or even:
var question = 1;
$("ul[id^='question'] li").on( "click", function(e) {
if ($(this).closest("ul").attr("id") === "question"+question) {
$(this).addClass("test" + question);
question++;
}
});
this is just my imagination since i don't know your html looks like.
you just create for 1 action when you have 6 button with different id.
try to use .each with same classname in your button.
var question = 1;
$('.question').each(function() {
$("ul#question"+question+" li").on( "click", function(e) {
$(this).addClass("test" + question);
});
question++;
});
I have added a function to jQuery prototype as below. What I want to do is when this method is invoked, generate an html form based on the arguments passed to the method and show it in a colorbox.
(function($) {
$.fn.myFunction = function(data){
var form = $('<form name="people"></form>');
var index;
for (index = 0; index < data.length; index++) {
var match = data[index];
$('<input type="radio" name="person">' + match['name'] + ' [' + match['uri'] + ']<br> ')
.attr("value", match['uri'])
.appendTo(form);
}
$('<input type="button" id="a_button" value="Add"/><br>')
.appendTo(form);
var list = $('<div>').append(form).html();
$('#a_button').click(
function(){
console.log('message from event handler');
}
);
$.colorbox({ innerWidth:420, innerHeight:315, html: list });
};
})(jQuery);
As you can see, form has a button called Add using which I hope to make an ajax request. But unfortunately click event handler attached to this button doesn't seem to be invoked.
Does anyone have any idea about what's wrong here? myFunction is actually invoked by a drupal ajax command in case if that's helpful.
You are appending the form to the DOM after attaching the event handler.
$('#a_button') searches the DOM at that specific point in time, but the form is not added to the DOM until after your call to colorbox with list as a parameter.
Try a permanent delegated event handler instead (or simply add the click handler after the colorbox line).
e.g.
$(document).on("click", "#a_button", function(){
console.log('message from event handler');
});
or
$.colorbox({ innerWidth:420, innerHeight:315, html: list });
$('#a_button').click(
function(){
console.log('message from event handler');
}
);
I have a click event
$('#ship_Move').click(function (event) {
event.stopPropagation();
$('.shipActionsList').remove();
moveShip(shpID);
});
that calls a function moveShip
function moveShip(shp_id) {
$('.fieldDivs').click(function () {
$("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>");
});
}
And the debugging is giving the right results - but with one problem. If I first click the #ship_Move element 4 times, and then select a destination (.fieldDivs) I get this:
Move 162 to FD455
Move 162 to FD455
Move 162 to FD455
Move 162 to FD455
Because the moveShip function has been called 4 times, and each of them are waiting for a .fieldDivs element to be clicked, and when it is clicked, all 4 of them append their results (162 is the ship ID I want to move, FD455 is its destination).
What I need is something among these lines:
function moveShip(shp_id) {
$('.fieldDivs').click(function () {
$("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>");
// IF A NEW #SHIP_MOVE IS CLICKED, END THIS FUNCTION AS IT WILL BE CALLED AGAIN
});
}
I know I can return false to break functions, but for a click event I need a new function, so return false would just end the click event inside that event. What I mean is - if you exchange the above commented line //IF A NEW SHIP with the following code:
$('.ship_Move').click(function () {
// return false would break this function
});
This code will only end this click event, but not the moveShip function.
I hope I made myself clear enough...
Thanks!
You could unbind existing click event handler beforehand:
$('.fieldDivs').off('click').click(function() {
// ...
});
If there are other click event handlers that should be kept, I suggest to use namespaced events:
$('.fieldDivs').off('click.move').on('click.move', funciton() {
// ...
});
Though, after thinking about it, instead of binding event handlers over and over again, you could just bind them once and share necessary data via variables:
$(function() {
var shpID = ...; // however this is set
$('#ship_Move').click(function (event) {
event.stopPropagation();
$('.shipActionsList').remove();
// set shpID here somehow?
});
$('.fieldDivs').click(function () {
$("#hello").append("Move "+ shpID + "to " + $(this).attr('id')+"<br/>");
});
});
It doesn't look like you have to bind a new event handler only because shpID changes. Of course this is a simplified example since I don't know your code, but maybe it helps.
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');
}