Javascript 将事件添加到动态创建的按钮_Javascript_Jquery_Html

Javascript 将事件添加到动态创建的按钮

javascript jquery html

Javascript 将事件添加到动态创建的按钮,javascript,jquery,html,Javascript,Jquery,Html,在这里，我创建动态单选按钮、文本区域和单击事件，但我的添加和删除按钮的单击事件不适用于动态创建的按钮。我尝试使用jquery的点击事件，但它并没有按预期工作。如何在我尝试使用的场景中添加.on jquery函数： $("#TextBoxesGroup")‌.on("click", ".abc", (function () { //some script }); 但是当我点击我创建的新的动态添加按钮时，它根本不是在添加另一个块 <!DOCTYPE html> <html&g

在这里，我创建动态单选按钮、文本区域和单击事件，但我的添加和删除按钮的单击事件不适用于动态创建的按钮。我尝试使用jquery的点击事件，但它并没有按预期工作。如何在我尝试使用的场景中添加.on jquery函数：

$("#TextBoxesGroup")‌.on("click", ".abc", (function () {
 //some script
});

但是当我点击我创建的新的动态添加按钮时，它根本不是在添加另一个块

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var counter = 2;
alert(123);
$(".abc").click(function () {
if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}

 var newTextBoxDiv = $(document.createElement('div'))
  .attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
   '<input type="text" name="textbox' + counter +
   '" id="textbox' + counter + '" value="" ><br><input type="radio" name="gender' + counter + ' value="male" > Male<input type="radio" name="gender' + counter + ' value="male" > Female<br><textarea  id="textbox' + counter + ' rows="4" cols="50"></textarea><input type="button" class="abc" id="addButton' + counter + '" value="Add Button" ><input type="button" id="removeButton' + counter + '" value="Remove Button" >');

 newTextBoxDiv.appendTo("#TextBoxesGroup");


 counter++;
 });
$("#removeButton").click(function () {
 if(counter==1){
      alert("No more textbox to remove");
      return false;
   }

 counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head>
<body>

</head>
<body>

<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
  <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
   <input type="radio" name="gender" value="male"> Male
   <input type="radio" name="gender" value="female"> Female<br>
   <textarea id="textbox" rows="4" cols="50"></textarea>
    <input type='button' class="abc" value='Add Button' id='addButton'>
    <input type='button' value='Remove Button' id='removeButton'>
    <input type='button' value='Get TextBox Value' id='getButtonValue'>
</div>


$（文档）.ready（函数（）{
var计数器=2；
警报（123）；
$（“.abc”）。单击（函数（）{
如果（计数器>10）{
警报（“仅允许10个文本框”）；
返回false；
}
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'Textbox#'+计数器+'：'+
“
女性
使用
或
阅读关于$（家长）。在（“#addButton”，“click”，callback）；
上，由于您有多个删除/添加按钮，请使用class而不是IDReformat您的代码。它看起来太混乱了。伟人请添加您的注释和解决方案$（“直接家长id\u class”）class或id？仅供参考，我的downvoteTanks@guradio没有错别字。我已经更正了$（“#TextBoxesGroup”）。在（“click”、“.abc”、（function（）{上，我试着给出上面的点击事件，但它根本不只是添加新按钮？？？这是什么意思
$(".abc").on('click',function(){

    //add your script
})

$("immediate_parent_id_or_class").on('click',".abc",function(){

        //add your script
})