的jQuery - Click事件不工作的动态创建按钮表

Question

我已经看过，虽然所有的历史这个问题的答案，但似乎没有内是为我工作

当点击我的页面，一个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() { 

}); 

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

感谢

Answer 1

看一看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 ") 
    }) ; 

回车按钮按预期工作。

Answer 2

JQuery在调用代码时附加事件处理函数。因此，如果在$（Document）.ready（）被触发后创建按钮，它将不会附加事件处理程序，即使它与该元素相匹配。请记住，当您调用$（'＃Id'）。click（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(); 
});