I have an HTML table with various rows, each has a delete button with a class.
On the DocumentReady event I wire up all buttons with this class to handle the click event.
On the click event, it does a jQuery POST which deletes data from the database and returns the table with the removed row.
If I go to click another delete button it doesn't do anything as if the click event is not wired up. I have tried wiring it up in the OnSuccess event as well as DocumentReady but nothing.
Please do post your jQuery code responsible for that whole logic. Just as a shot in the dark I'd suggest you'll have to use:
$(".button").live("click",function(){...})
instead of
$(".button").click(...)
I would use the live binding function in jquery to be able to bind to all specified elements at any time of creation:
http://docs.jquery.com/Events/live
Sounds like you are removing the entire table (with the buttons that have events attached to them) and replacing it with a new table (with new buttons that don't have buttons attached).
You have a couple of options.
Just remove the row that you delete - don't replace the entire table
Use event delegation and put the event handler on the element containing the table
Rerun the code that attaches the events every time you rebuild the table
Related
situation
I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.
the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked. the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows
collapse with glyphicon
I am using the below jQuery to toggle the icon
$('#tog').on('click', function() {
console.log("tog clicked");
$(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
});
so far I have this all working as shown with this fiddle http://jsfiddle.net/vgfb74u0/
Problem
the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.
I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.
I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!
You need to manually bind events to any dynamically created element, or let jQuery do that for you.
Changing
$('#tog').on('click', function() {});
To
$('html').on('click', '#tog', function() {});
Will tell JavaScript to delegate the event to any #tog that's created inside the <html> element.
The problem is the event handler is lost when the table is re-rendered.
The fix is to attach the handler in a different way: $('.table').on('click', '#tog', function() {...}
See the updated jsfiddle
I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?
You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.
I have a working multiplication of textbox, however, when I added a new textbox, the function will not performed. Only the first textboxes is being executed of the js function that I made. Sorry for asking this but I am pretty new to jsquery/javascript.
here's my working script: JS FIDDLE
What it does is, I have a table and 2 TR on it. it multiply the cost(3rd td) and the quantity(fourth td) and send the results to the line total (fifth td). Then I have a button, that will add another set of tr to the existing table, however, the multiplication wont work on the newly added tr.
Can you help me here?
TIA,
Nimitz
Just add these two lines as two last lines of your .click(...) handler:
$(".qty :input").off('keyup',byPrice).on('keyup',byPrice)
$(".price :input").off('keyup',byQty).on('keyup',byQty);
Here is updated JSFiddle
The reason for that is - you have to re-register event listeners for the line newly created.
You can use same selectors, but then you have to "off" previous event listeners.
Update
Another approach, is you can bind events only on newly created row:
Here is another JSFiddle for that
You have to put contents of newly created row into some variable:
$('#myinvoice tr:last').after($newRow = $('<tr><td>...'));
And then add events for the selectors inside this $newRow only:
$(".qty :input",$newRow).keyup(byPrice);
$(".price :input",$newRow).keyup(byQty);
I'd use second
Hi,
I want to attach on click event on Text Box with value A in attachment and same with B.
I am using dojo toolkit with the following code:
window.onload = function () {
dojo.query('.test').onclick(function(){
alert('test');
});
};
I have a table control having two column name and value both columns contain textboxes.On column name textbox i have added a class with name 'test'.The table rows increase dynamically as shown in attachment.
Now my concern is these textboxes increase dynamically how can i attach event on these textbox.On signle textbox this is working fine but here table rows increase and how can i find particular textbox with same class?
Can anyone help me?
define the function separately.
var myFunc = function() {
alert('test');
};
Now, use it, to attach to text boxes (like you have already done)
dojo.query('.test').onclick(myFunc);
But, while adding new rows, it is your duty to attach this function to the newly added text boxes. You can refer it by the name "myFunc".
Note:-
Running the code piece again - "dojo.query('.test').onclick(myFunc);" will add duplicate handlers for existing textboxes.
If you are adding a large number of handlers or if the information on the screen is dynamic, you'll want to look at using delegated event handlers.
With delegation, you are only adding one handler, which is better for memory usage and you would be adding the handler to the container, not each specific item, which means that the items themselves can safely change without having to re-attach handlers to them.
For more details, I would point you towards this excellent answer: What is DOM Event delegation?
I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.
This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.
Is there a way I can prevent that the row click event is triggered when I click on a button in that row ?
I only want the event to fire by click on the row background but not by click on any button within a row.
Many thanks for any help with this, Tim.
At the top of your click event handler, put the following:
if ($(event.target).prop('type').toLowerCase() !== 'table' ||
! $(event.target).hasClass('myClass')) {
event.stopImmediatePropagation();
return;
}
What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).
If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:
if ($(event.target).prop('type').toLowerCase() === 'button') {
event.stopImmediatePropagation();
return;
}
This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.