Javascript jquery-单击事件不适用于表中的动态创建按钮

我已经看过了这个问题的所有历史性答案，但似乎没有什么对我有用

单击“我的页面”上的按钮时，将显示一个div框并添加一个表

$('#NewParentItem').click(function() { 

InnerTable =  "<table width='90%' bgcolor='#CCCCCC' align='center'  >"
InnerTable += "<tr height='12px'> "
InnerTable += "<td width='2%'></td> "   
InnerTable += "<td width='68%' style='text-align:center' > <input type='text' name='Item' placeholder='Main Item Name' size='12'> </td> "   
InnerTable += "<td width='30%'> <button type='button' id='NewParentSubmit' value='generate new element' >Enter </button>  </td> "
InnerTable += "</tr> </table>" 
DisplayUniDiv(160,200,50,200) // display div box
$('#UniDivHead').html("Add New Main Group Item (Parent)")           
$('#UniDivBody').html( InnerTable )         
}) ; // End of Function `  

我现在希望当用户单击按钮时（在动态创建按钮后）会触发此事件，但什么都没有发生

所有这些功能都包含在

$(document).ready(function() { 

});

有人能提供一个解决方案或一些建议吗

谢谢

看一看

$（文档）.ready（函数（）
{
$（'#NewParentItem'）。单击（函数（）{
InnerTable=“”
内表+=“”
内表+=“”
内表+=“”
InnerTable+=“输入”
内表+=“”
//DisplayUniDiv（160200,50200）//显示div框
$（'#UniDivHead'）.html（“添加新的主组项（父项）”）
$（'#UniDivBody'）.html（InnerTable）
}) ; 
});
$（文档）。在（'click'，'NewParentSubmit'，函数（）上{
警报（“提交”）
}) ; 

“输入”按钮按预期工作。

请查看

$（文档）.ready（函数（）
{
$（'#NewParentItem'）。单击（函数（）{
InnerTable=“”
内表+=“”
内表+=“”
内表+=“”
InnerTable+=“输入”
内表+=“”
//DisplayUniDiv（160200,50200）//显示div框
$（'#UniDivHead'）.html（“添加新的主组项（父项）”）
$（'#UniDivBody'）.html（InnerTable）
}) ; 
});
$（文档）。在（'click'，'NewParentSubmit'，函数（）上{
警报（“提交”）
}) ; 

---

Enter按钮按预期工作。

JQuery在调用代码时附加事件处理程序。因此，如果按钮是在激发$（Document）.ready（）之后创建的，则它将不会附加事件处理程序，即使它与元素匹配

请记住，当您调用$（'#Id'）。单击（function（）{}）；您正在对DOM运行一个脚本，因为它在被调用时就存在。你真正想说的是。给我所有与选择器匹配的元素，对其应用一个单击处理程序，当您单击它时会触发函数（）

因此，如果按钮是在触发后创建的，则需要再次重新运行该代码。我还建议将一些代码分开，这样就可以不用在多个地方编写代码

所以试试这个：

function generateHTML() {
    var InnerTable =  "<table width='90%' bgcolor='#CCCCCC' align='center'  >";
    InnerTable += "<tr height='12px'> "
    InnerTable += "<td width='2%'></td> " ;  
    InnerTable += "<td width='68%' style='text-align:center' > <input type='text' name='Item' placeholder='Main Item Name' size='12'> </td> "  ; 
    InnerTable += "<td width='30%'> <button type='button' class='NewParentSubmit' value='generate new element' >Enter </button>  </td> ";
    InnerTable += "</tr> </table>";
    return InnerTable;
}

function setButtonEvent() {
    $('.NewParentItem').click(function() { //notice change to class from ID here
         generateTable();
    });
}

function generateTable() {
    DisplayUniDiv(160,200,50,200); // display div box
    $('#UniDivHead').html("Add New Main Group Item (Parent)");          
    $('#UniDivBody').html( generateHTML());
    setButtonEvent();       
}

$(document).ready(function() {
    generateTable();
});

函数generateHTML（）{
var InnerTable=“”；
内表+=“”
内表+=“”；
内表+=“”；
InnerTable+=“输入”；
内表+=“”；
返回内表；
}
函数setButtonEvent（）{
$（'.NewParentItem'）。单击（函数（）{//注意此处对类ID的更改
可生成（）；
});
}
函数generateTable（）{
displayinidiv（160200,50200）；//显示div框
$（'#UniDivHead'）.html（“添加新的主组项（父项）”）；
$（'#UniDivBody'）.html（generateHTML（））；
setButtonEvent（）；
}
$（文档）.ready（函数（）{
可生成（）；
});

JQuery在调用代码时附加事件处理程序。因此，如果按钮是在激发$（Document）.ready（）之后创建的，则它将不会附加事件处理程序，即使它与元素匹配

请记住，当您调用$（'#Id'）。单击（function（）{}）；您正在对DOM运行一个脚本，因为它在被调用时就存在。你真正想说的是。给我所有与选择器匹配的元素，对其应用一个单击处理程序，当您单击它时会触发函数（）

因此，如果按钮是在触发后创建的，则需要再次重新运行该代码。我还建议将一些代码分开，这样就可以不用在多个地方编写代码

所以试试这个：

function generateHTML() {
    var InnerTable =  "<table width='90%' bgcolor='#CCCCCC' align='center'  >";
    InnerTable += "<tr height='12px'> "
    InnerTable += "<td width='2%'></td> " ;  
    InnerTable += "<td width='68%' style='text-align:center' > <input type='text' name='Item' placeholder='Main Item Name' size='12'> </td> "  ; 
    InnerTable += "<td width='30%'> <button type='button' class='NewParentSubmit' value='generate new element' >Enter </button>  </td> ";
    InnerTable += "</tr> </table>";
    return InnerTable;
}

function setButtonEvent() {
    $('.NewParentItem').click(function() { //notice change to class from ID here
         generateTable();
    });
}

function generateTable() {
    DisplayUniDiv(160,200,50,200); // display div box
    $('#UniDivHead').html("Add New Main Group Item (Parent)");          
    $('#UniDivBody').html( generateHTML());
    setButtonEvent();       
}

$(document).ready(function() {
    generateTable();
});

函数generateHTML（）{
var InnerTable=“”；
内表+=“”
内表+=“”；
内表+=“”；
InnerTable+=“输入”；
内表+=“”；
返回内表；
}
函数setButtonEvent（）{
$（'.NewParentItem'）。单击（函数（）{//注意此处对类ID的更改
可生成（）；
});
}
函数generateTable（）{
displayinidiv（160200,50200）；//显示div框
$（'#UniDivHead'）.html（“添加新的主组项（父项）”）；
$（'#UniDivBody'）.html（generateHTML（））；
setButtonEvent（）；
}
$（文档）.ready（函数（）{
可生成（）；
});

您应该只有一个id相同的元素，请改用class。他将只有一个id为

NewParentSubmit

id的元素，因为他将在单击时用该表替换整个内容。您的代码正在运行检查此项您必须提供MCVE，因为您发布的代码无法解释您的问题。现在我想知道DisplayUniDiv（）方法在做什么？！也许这个添加元素覆盖了按钮，使其不可点击。或者单击事件传播以某种方式停止……鉴于提供的代码没有描述错误，您可以在jsfiddle.net（或类似）中重新创建问题吗？这个问题应该通过测试，目前还无法验证。你应该只有一个元素具有相同的id，改为使用类。他将只有一个Id为

NewParentSubmit

Id的元素，因为他将在单击时用该表替换整个内容。您的代码正在运行检查此项您必须提供MCVE，因为您发布的代码无法解释您的问题。现在我想知道DisplayUniDiv（）方法在做什么？！也许这个添加元素覆盖了按钮，使其不可点击。或者单击事件传播以某种方式停止……鉴于提供的代码没有描述错误，您可以在jsfiddle.net（或类似）中重新创建问题吗？这个问题应该通过测试，目前还无法验证。那么OP的问题是什么呢？？？这已经被评论过了，不应该是anwserI，我没有先阅读所有的答案，但我想如果这个代码有效的话，他应该复制粘贴这个

function generateHTML() {
    var InnerTable =  "<table width='90%' bgcolor='#CCCCCC' align='center'  >";
    InnerTable += "<tr height='12px'> "
    InnerTable += "<td width='2%'></td> " ;  
    InnerTable += "<td width='68%' style='text-align:center' > <input type='text' name='Item' placeholder='Main Item Name' size='12'> </td> "  ; 
    InnerTable += "<td width='30%'> <button type='button' class='NewParentSubmit' value='generate new element' >Enter </button>  </td> ";
    InnerTable += "</tr> </table>";
    return InnerTable;
}

function setButtonEvent() {
    $('.NewParentItem').click(function() { //notice change to class from ID here
         generateTable();
    });
}

function generateTable() {
    DisplayUniDiv(160,200,50,200); // display div box
    $('#UniDivHead').html("Add New Main Group Item (Parent)");          
    $('#UniDivBody').html( generateHTML());
    setButtonEvent();       
}

$(document).ready(function() {
    generateTable();
});