javascript功能在innerHTML中不起作用

Question

像onKeypress這樣的事件上的javascript函數不起作用，如果我使用innerHTML通過JAVCRIPT創建輸入標籤。以下是我正在使用的代碼。 同樣的工作，如果我在直接的JSP文件中。

$('<table id="additionalPassPopupTable'+rowNo+'" class="passenger_table_center">'+ 
     '<tr>'+ 
      '<td colspan="2" style="padding-left:20px; padding-top:5px; background-color:#e1e1e1;">Passenger Information</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
      '<td style="padding-left:40px;">First Name *</td>'+ 
      '<td>'+ 
       '<input type="text" name="fname" >'+ 
      '</td>'+ 
      '<td>'+ 
       '<font color="red"></font>'+ 
      '</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
      '<td style="padding-left:40px;">Last Name *</td>'+ 
      '<td>'+ 
       '<input type="text" name="lname" ></td>'+ 
      '<td>'+ 
       '<font color="red"></font>'+ 
      '</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
      '<td style="padding-left:40px;">Mobile Number</td>'+ 
      '<td>'+ 
       '<input type="text" name="phoneno" maxlength="10" onkeypress="return isNumber(event)" >'+ 
      '</td>'+ 
      '<td>'+ 
       '<font color="red"></font>'+ 
      '</td>'+ 
     '</tr>'+ 
     '<tr>'+ 
     '<td style="padding-left:40px;">Email Address</td>'+ 
      '<td>'+ 
       '<input type="text" name="email" maxlength="100" onkeypress="return validateEmail(event)">'+ 
      '</td>'+ 
      '<td>'+ 
       '<font color="red"></font>'+ 
      '</td>'+ 
     '</tr>'+ 
    '</table>').appendTo('#additionalPassengerDiv'); 

function isNumber(evt) { 
    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
     return false; 
    } 
    return true; 
} 

function validateEmail(evt) { 

    evt = (evt) ? evt : window.event; 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    if (charCode > 31 && ((charCode < 48 || charCode > 57) && (charCode < 64 || charCode > 90) && (charCode < 97 || charCode > 122) && (charCode != 46) && (charCode != 45) && (charCode != 95))) { 
     return false; 
    } 
    return true; 
} 

Answer 1

你好，我將你的代碼附加到jsfiddle中。在這你的代碼工作。請在這裏找到小提琴。

謝謝。 Java script function in innerhtml :JSFiddle

function isNumber(evt) { 
alert("Validate Number"); 
evt = (evt) ? evt : window.event; 
var charCode = (evt.which) ? evt.which : evt.keyCode; 
if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
    return false; 
} 
return true;} 
function validateEmail(evt) { 
alert("Validate Email Id"); 
evt = (evt) ? evt : window.event; 
var charCode = (evt.which) ? evt.which : evt.keyCode; 
if (charCode > 31 && ((charCode < 48 || charCode > 57) && (charCode < 64 || charCode > 90) && (charCode < 97 || charCode > 122) && (charCode != 46) && (charCode != 45) && (charCode != 95))) { 
    return false; 
} 
return true;} 

$(document).ready(function(){ 
$('#additionalPassengerDiv').html('<table id="additionalPassPopupTable" class="passenger_table_center">'+ 
    '<tr>'+ 
     '<td colspan="2" style="padding-left:20px; padding-top:5px; background-color:#e1e1e1;">Passenger Information</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td style="padding-left:40px;">First Name *</td>'+ 
     '<td>'+ 
      '<input type="text" name="fname" >'+ 
     '</td>'+ 
     '<td>'+ 
      '<font color="red"></font>'+ 
     '</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td style="padding-left:40px;">Last Name *</td>'+ 
     '<td>'+ 
      '<input type="text" name="lname" ></td>'+ 
     '<td>'+ 
      '<font color="red"></font>'+ 
     '</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
     '<td style="padding-left:40px;">Mobile Number</td>'+ 
     '<td>'+ 
      '<input type="text" name="phoneno" maxlength="10" onkeypress="return isNumber(event)" >'+ 
     '</td>'+ 
     '<td>'+ 
      '<font color="red"></font>'+ 
     '</td>'+ 
    '</tr>'+ 
    '<tr>'+ 
    '<td style="padding-left:40px;">Email Address</td>'+ 
     '<td>'+ 
      '<input type="text" name="email" maxlength="100" onkeypress="return validateEmail(event)">'+ 
     '</td>'+ 
     '<td>'+ 
      '<font color="red"></font>'+ 
     '</td>'+ 
    '</tr>'+ 
'</table>');});