获取动态添加的文本框值时出现奇怪的错误？答案

【问题标题】：Getting strange error while fetching dynamic added textbox value?获取动态添加的文本框值时出现奇怪的错误？
【发布时间】：2016-01-23 14:02:14
【问题描述】：

使用 jQuery，我将文本框附加如下：-

$.each(myDataJSON, function (index, value)
    {
           var newRow = "<tr><td><input type='text' class='txtBox' value="+value.Price+"/></td></tr>";          
        $('#myTable').append(newRow);
    })

现在，在添加行之后，会呈现所需的 html。现在我将模糊事件与这些文本框相关联，如下所示：-

$(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
});

但是，如果我尝试修补它。然后上述错误消失，但它不反映新的更新值而是旧值。仅对第一个动态添加的文本框，它给出新的更新值，而不是其他文本框。

    $(document).on('blur','.txtBox',function(e)
{
    var newTextValue = $('.txtBox').val();
    console.log(newTextValue);//no error 
});

奇怪的是，当我在检查窗口中检查 html 时，文本框的值都没有更新。

我的问题是

如何为动态添加的文本框获取文本框的更新值

另外， 除了 focusout/blur 是否有任何事件，以便我可以在用户离开文本框的那一刻获得更新的文本框值，而不管等待文本框外的点击事件

【问题讨论】：

console.lo( 应该是console.log( 拼写错误。你在哪里用过toLowerCase()？？
这里输入问题时输入错误
尝试this.val() 而不是$(this).val()
checked Uncaught TypeError: this.val is not a function
做$(e.target).val()

标签： javascript jquery html

【解决方案1】：

“尝试手动执行函数时”失败，因为您有不同的this。事件 this 指向 invoker

你必须这样做

$(document).on('blur','.txtBox',function(e)
{
    var newTextValue = $(e.target).val();

});

【讨论】：

它工作了..但是你能简单解释一下为什么 $(this).val() 会抛出错误
你的文本框是动态生成的，当事件执行时它指向调用者。
Parath，你能告诉我我在问题中问过的事件内容吗..
你可以使用keyup事件。
@ParthTrivedi 我认为你错了。 html是动态生成的没关系，看看这个例子：jsbin.com/gohizuzaje/edit?html,js,console,output即使是这样，它也不应该抛出关于toLowerCase的错误，它不应该与那个方法有任何关系。如果我错了，请纠正我。

【解决方案2】：

此代码适用于我（记录正确的值）：

<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>

也许你应该检查一下是否还有其他问题？

【讨论】：

【解决方案3】：

<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>

【讨论】：

@Chetan 请检查这个:)