How to attach onclick event on textboxes? - javascript

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?

Related

How can I overwrite a function in addEventListener?

In my application, there are several buttons which trigger my function loadObj(a). This function mainly loads the corresponding 3D object using the Three.js library.
When I choose a object and click the corresponding button, a set of three extra buttons appear which allow me to load three variations of the selected object. The code below already works for this scenario using addEventListener.
My problem arises when I select a different object, which triggers the code below again. Then, if I click one of the extra buttons for the newly selected object, it loads the correct object, but it also loads the previous one. If I choose a third object, if I click one of the extra buttons, it will not load just the corresponding object, but the previous two as well.
I have read that addEventListener works in a cumulative manner, where the functions just keep being added up. So, everytime it runs the loop below, it adds a new loadObj with the path of the new model to any other previous loadObj.
Is there any way to overwrite a function inside addEventListener? I need the previous loadObj to be removed from addEventListener before adding the new one.
//Solve the scope/closure problem to able to call loadDress inside the "for" loop below
function delegate(a) {
return function(){
loadObj(a)
}
}
for(var item in paths){
document.getElementById("size" + item).style.display = "inline-block";
document.getElementById("size" + item).addEventListener("click", delegate(paths[item]), false);
}
If you run that loop every time you click the button, it's adding an event listener on every run. That's why you keep getting more and more items each time--you keep adding more functions.
Instead of trying to dynamically add new event listeners on dynamically added buttons, you can delegate your event listening to a parent element that is a direct ancestor of all of the buttons. Then you have a single event listener that works for all of your buttons without any extra effort. You just check to make sure a click is from the right type of element and then you can get any relevant information directly from that element (via data- or other attributes on the event object target).

jQuery Multiplication of Textbox Event Handler for Dynamic elements

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

Jquery change triggers too often

I'm using jQuery 1.7.2 and got an on change event for a class like this:
$(document).on('change', '.item_amount', function(){
});
Many selects on the same page have that class and if I change one of those selects the change event triggers X times if I change one of those selects(X is the amount of selects having that class) but I only want it to trigger once since only one select has changed.
Is that normal behaviour or am I doing something wrong?
Edit:
The problem seems to be somewhere else. The elements containing that select get inserted(Ajax call) and when one of them gets inserted into the dom, the change event is triggered for all existing elements.
So basically I got select number 1 which holds some products. When a product is selected HTML code is inserted into a div which holds all current products. When that happens the change event on all products in that div is triggered.
Use this keyword to refer to the current element changed in the change function block.
this --> JavaScript or Native Dom Element.
$(this) ->Your jQuery Object
$(document).on('change', '.item_amount', function(){
alert(this.value);
console.log(this);
});
Set the. on change to the element and pass it as an argument to the function?

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters
If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).
What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

Wire up button click events after AJAX post

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

Categories