Javascript 如何验证动态添加的输入字段

脚本中的div id有问题。我只是想知道如何控制divid，以便在另一个脚本中使用函数id。这是我的表格：

<div class="container">
    <div class="row">
        <div class="col-md-7 field_wrapper">
            <div data-role="dynamic-fields">
                <div class="form-inline">                                                   
                    <div class="form-group" id="txtboxToFilter">
                        <label for="nip">NIP:</label>
                        <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/>
                    </div>
                    <div class="form-group">
                        <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a>
                    </div>
                    <span id="name_status"></span>
                </div> 
            </div>  
        </div>  
    </div>

夹：

这是我的剧本：

$(document).ready(function(){
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC / KAKANSAR">SMC / KAKANSAR</option><option value="STAFF OPERASI / KASIOPS">STAFF OPERASI / KASIOPS</option><option value="OSC / KORPOS">OSC / KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); // Add field html
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

function checkname()
{
 var name=document.getElementById( "UserName" ).value;

 if(name)
 {
  $.ajax({
  type: 'post',
  url: 'checkdata.php',
  data: {
   user_name:name,
  },
  success: function (response) {
   $( '#name_status' ).html(response);
   if(response=="OK")   
   {
    return true;    
   }
   else
   {
    return false;   
   }
  }
  });
 }
 else
 {
  $( '#name_status' ).html("");
  return false;
 }
}

$（文档）.ready（函数（）{
var addButton=$（'.add_button'）；//添加按钮选择器
var wrapper=$（'.field_wrapper'）；//输入字段wrapper
var fieldHTML='NIP:Jabatan:SMC/KAKANSARSTAFF OPERASI/kasiopossc/korposdantimsrescuerstaff KOMUNIKASIHUMASSTAFF ADMINLOG'；//新输入字段html
var x=1；//初始字段计数器为1
$（添加按钮）。单击添加按钮后，单击（函数（）{//）
x++；//增量字段计数器
$（包装器）.append（fieldHTML）；//添加字段html
});
$（包装器）。在（'click'，'remove_button'，函数（e）{//单击remove button后
e、 预防默认值（）；
$（this）.parent（'div'）.parent（'div'）.remove（）；//删除字段html
x--；//减量字段计数器
});
});
函数checkname（）
{
var name=document.getElementById（“用户名”）.value；
如果（姓名）
{
$.ajax({
键入：“post”，
url:'checkdata.php'，
数据：{
用户名：name，
},
成功：功能（响应）{
$（'name#u status'）.html（响应）；
如果（响应=“确定”）
{
返回true；
}
其他的
{
返回false；
}
}
});
}
其他的
{
$（'#name_status'）.html（“”）；
返回false；
}
}

这是我第一次

<div class="form-group" id="txtboxToFilter">
    <label for="nip">NIP:</label>
    <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/>
</div>

夹：

它可以用来使用函数checkname（），但是如果我想点击

<div class="form-group">
    <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a>
</div>

用于使用my script$（addButton）功能添加相同的输入类型文本

var fieldHTML='NIP:'；

---

但结果是var fieldHTML无法使用函数onkeyup checkname（）。请帮助我…

您应该传递内联事件侦听器所附加到的元素的引用。您需要将this引用传递给函数，并使用

this

引用获取元素

通过添加

此

更改您的函数

e、 g

---

因此，您希望在每个

keyup

事件中获取对

div

的引用？？是。我希望我的fieldHTML可以使用函数onkeyup=“checkname（）”。对于创建的每个新的

fieldHTML

，您在

keyup

上都会得到相同的输出，对吗？是的。我想在创建fieldHTML时可以使用checkname（）函数。对不起，console.log（'checkname'+name）；）的函数是什么？我是编程初学者：（@DikaAndharu

console.log

在浏览器的控制台日志中打印输出。打开chrome或firefox。右键单击，然后打开

inspect element

。然后转到控制台选项卡。您将在那里看到输出。这比使用

alert

要好。抱歉，它可以工作，但从数据库中选择的结果不成功。Wh结果是“OK”这只是打印到第一个输入类型文本。而fieldHTML无法工作…@DikaAndharu返回的

响应是什么？第一个响应刚刚返回。当我尝试从fieldHTML插入输入类型文本时，结果仅显示在第一个中。请查看输入类型文本或可以吗，先生？如果不可能的话，没关系。。
var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>';

<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/>

var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> 
<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC / KAKANSAR">SMC / KAKANSAR</option><option value="STAFF OPERASI / KASIOPS">STAFF OPERASI / KASIOPS</option><option value="OSC / KORPOS">OSC / KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>';

 function checkname(element)
 {
      var name= element.value;

      console.log('Checkname '+name);
  }