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

时间:2017-02-22 19:14:32

标签: javascript jquery html

我正在尝试根据用户请求找到我在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找到这些变量。

感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

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

确保此类.txtSuffix所有对象都遵循此行为非常重要。