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

Question

I am trying to find specific input variables that I do append in my div based on the user requests.

Once the input variables are created I need to validate the content in the input tags before I can proceed. But I am not able to find those variables in jQuery..

Any help is appreciated.

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

How do I find txtSuffix input variables.

I tried:

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

I am not able to find those variables with jQuery.

Any help is appreciated.

score 2 · Accepted Answer · answered Feb 22 '17 at 20:01

Using jQuery, one way to solve this problem is to use the .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>

It is important to make sure that all objects with this class .txtSuffix will follow this behavior.

Thanks your suggestion helped . Using .on() i am able to find all required inputs. — Prateju Patil, Feb 22 '17 at 20:35

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

1 Answers1