尝试使用 jQuery 在 HTML 页面中查找动态创建的输入变量

Question

我正在尝试根据用户请求找到我在 div 中附加的特定输入变量。

创建输入变量后，我需要先验证输入标签中的内容，然后才能继续。但是我无法在 jQuery..

中找到这些变量

感谢任何帮助。

$("#txtNoOfAccounts").on("focusout", function () {
    var count = parseInt($("#txtNoOfAccounts").val());
    $("#lblSuccess").text(' ');
    $("#lblError").text(' ');
    if (count.toString() != "NaN") {
    $("#accountDiv").empty();

    for (var i = 0; i < count; i++) {
        $("#accountDiv").append(
       "<div class='divTableRow' style='width: 100%'>" +
           "<div class='divTableCell' style='width: 40%;padding-left:0;'>" + "<input type='text' name='AccountNo_" + i.toString() + "'" + " class='txtAccountNo' /></div>" +
          "<div class='divTableCell' style='width: 40%'>" + "<input type='text' name='Suffix_" + i.toString() + "'" + " class='txtSuffix' /></div>
       </div>")
     }
    }
});

如何找到 txtSuffix 输入变量。

我试过了：

$('.txtSuffix').focusout(function (e) {
    alert("Control Found");
});

我无法通过 jQuery 找到那些变量。

感谢任何帮助。

Answer 1

使用jQuery，解决这个问题的一种方法是使用.on() Event Handler Attachment

$("#txtNoOfAccounts").on("focusout", function() {
    var count = parseInt($("#txtNoOfAccounts").val());
    $("#lblSuccess").text(' ');
    $("#lblError").text(' ');
    if (count.toString() != "NaN") {
        $("#accountDiv").empty();
        for (var i = 0; i < count; i++) {
            $("#accountDiv").append(
                "<div class='divTableRow' style='width: 100%'>" +
                "<div class='divTableCell'  style='width: 40%;padding-left:0;'>" + "<input type='text' value='no event' name='AccountNo_" + i.toString() + "'" + " class='txtAccountNo' /></div>" +
                "<div class='divTableCell' style='width: 40%'>" + "<input type='text' value='with focusout event' name='Suffix_" + i.toString() + "'" + " class='txtSuffix' /></div></div>")
        }
    }
});

$(document).on('focusout', '.txtSuffix', function() {
    alert('Test');
});

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  </head>
  <body>
    <input type="text" id="txtNoOfAccounts">
 <div id="accountDiv">
 </div>
  </body>
</html>

重要的是要确保所有具有此 class .txtSuffix 的对象将遵循此行为。

尝试使用 jQuery 在 HTML 页面中查找动态创建的输入变量

Trying to find input variables created dynamically in HTML page with jQuery

html

javascript

jquery