Getting strange error while fetching dynamic added textbox value?
Question
Using jQuery, I am appending textbox as below:-
$.each(myDataJSON, function (index, value)
{
var newRow = "<tr><td><input type='text' class='txtBox' value="+value.Price+"/></td></tr>";
$('#myTable').append(newRow);
})
Now after appending rows, desired html is rendered. Now I am associated the blur event to these textboxes as below:-
$(document).on('blur','.txtBox',function(e)
{
var newTextValue = $(this).val();
console.log(newTextValue);//this throws below error
//Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
});
However,if I try to patch it. Then the above error goes off but it doesn't reflect the new updated value but the old value. Only for the first dynamically added textbox,it gives the new updated value but not for the other textboxes.
$(document).on('blur','.txtBox',function(e)
{
var newTextValue = $('.txtBox').val();
console.log(newTextValue);//no error
});
Strange is that when I check html in inspection window none of the textbox value is updated.
My question here is
How to get the updated value of textbox for dynamically added textboxes
Plus, Is there any event other than focusout/blur so that I can get the updated textbox value, the moment user leaves the textbox irrespective of waiting for the click event outside the textbox
3 answers
solution1
0 ACCPTED 2016-01-23 14:16:02
It fails " when trying to execute the function manually " because you have a different this . event this points to the invoker
You have to do
$(document).on('blur','.txtBox',function(e)
{
var newTextValue = $(e.target).val();
});
solution2
0 2016-01-23 14:21:20
This code works for me (logs the right values):
<html>
<body>
<table id = "myTable">
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var newRow = "<tr><td><input type='text' class='txtBox' value='1.1'/> </td></tr>";
$('#myTable').append(newRow);
var newRow1 = "<tr><td><input type='text' class='txtBox' value='1.2'/></td></tr>";
$('#myTable').append(newRow1);
$(document).on('blur','.txtBox',function(e)
{
var newTextValue = $(this).val();
console.log(newTextValue);//this throws below error
//Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
});
</script>
</html>
Maybe you should check if something else is the problem?
solution3
0 2016-01-23 14:27:00
<html>
<head>
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$(document).on('blur', '.txtBox', function (e) {
var newTextValue = $(this).val();
alert(newTextValue)
});
$('#addRow').click(function () {
var szTr = "<tr><td><input type='text' class='txtBox' value='10'/> </td></tr>";
$('#myTable').append(szTr);
});
});
</script>
</head>
<body>
<button id="addRow" value="Add Row">Add Row</button>
<table id="myTable">
<thead>
<tr>
<th>Headline</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.