2017-02-22 15 views
1

Я пытаюсь найти конкретные входные переменные, которые я добавляю в своем div на основе пользовательских запросов.Попытка найти входные переменные, созданные динамически на странице HTML с помощью jQuery

После создания входных переменных мне нужно проверить содержимое во входных тегах, прежде чем я смогу продолжить. Но я не могу найти эти переменные в 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.

Любая помощь приветствуется.

ответ

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"> 
 
\t <div id="accountDiv"> 
 
\t </div> 
 
    </body> 
 
</html>

Важно, чтобы убедиться, что все объекты с этим классом .txtSuffix будет следовать этому поведение.

+1

Спасибо за ваше предложение. Используя .on(), я могу найти все необходимые входы. –