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

Enter按鈕按預期方式工作。

Answer 2

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();
});