I am adding multiple text box element with the same class.
It's not working in my project, for demo purpose i added the code to (http://jsfiddle.net/8gbvd/)
Its working there how to debug this issue
Thank you
-
Does the navigator inspector return errors ?BENARD Patrick– BENARD Patrick2013-12-03 10:42:29 +00:00Commented Dec 3, 2013 at 10:42
-
1Well if the fiddle is working, then you got a working example to compare your code to... the problem is most probably in the differences... My first guess would be that you're actually adding those textboxes dynamically with javascript, while they're hard-coded in you jsfiddle, Am I right ?Laurent S.– Laurent S.2013-12-03 10:42:30 +00:00Commented Dec 3, 2013 at 10:42
-
@Jahnux73 no navigator inspector didn't return errorsBalaji Chandrasekaran– Balaji Chandrasekaran2013-12-03 10:43:49 +00:00Commented Dec 3, 2013 at 10:43
-
@Bartdude yes its added dynamically to the table.Balaji Chandrasekaran– Balaji Chandrasekaran2013-12-03 10:44:35 +00:00Commented Dec 3, 2013 at 10:44
Add a comment
|
2 Answers
As your textboxes are dynamically added to the page, you need to use delegated events. So
DON'T DO THIS :
jQuery('.qtyBox').change(
function(){
alert(jQuery(this).val());
});
BUT DO THIS INSTEAD :
jQuery('#priceRuleTable').on('change','.qtyBox',
function(){
alert(jQuery(this).val());
});
cfr this page for a more detailed explanation on event delegation.
note that if you want to perform an action each time a key is pressed (and not when the user leaves the textbox , you can use the event input instead of change
Comments
If you have same class for multiple select elements and you want to get selected value, only for the changed element, then you can do something as below:
$('#priceRuleTable').on('change', '.qtyBox', function(){
//to check only selected item is being triggered add css, you can remove it later
$(this).parent().css("border", "2px solid red");
//you should get value of the changed select element
var v = $(this).parent().find("option:selected").text();
console.log(v);
});
