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

Question

使用 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
});

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

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

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

我的问题是

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

另外，除了 focusout/blur 之外，是否还有其他事件，以便我可以在用户离开文本框时获取更新的文本框值，而不管等待文本框外的点击事件

Answer 1

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

你必须做

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

});