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

Click event not working for dynamically created button within a table

本文关键字：动态 创建 按钮 事件 不适用 适用于 单击      更新时间：2023-09-26

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

当在我的页面上单击一个按钮时，一个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 `

此表现在包含一个 ID 为 NewParentSubmit 的按钮

在我的脚本中，我有以下内容 

$(document).on('click', '#NewParentSubmit' , function() {
    alert(" Submit ")  
    }) ;     // End of Function

我现在希望当用户单击按钮时触发（在动态创建按钮之后），但是什么也没发生？

所有这些功能都包含在 

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

任何人都可以提供解决方案或一些建议吗？

谢谢

看看 https://jsfiddle.net/1waumb6d/

$(document).ready(function()
{
$('#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 )         
}) ; 
});
$(document).on('click', '#NewParentSubmit' , function() {
    alert(" Submit ")  
    }) ;

"输入"按钮按预期工作。

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

请记住，当您调用 $（'#Id'）.click（function（）{}）;您正在针对 DOM 运行脚本，因为它在调用时存在。 你真正说的只是。 "给我所有与选择器匹配的元素，对它应用一个点击处理程序，当你点击它时触发 function（）"

因此，如果按钮是在触发后创建的，则需要再次重新运行该代码。我还建议将一些代码分开，这样您就可以在不在多个位置编写代码的情况下执行此操作

所以试试这个：

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();
});
相关文章：