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