innerHTML에서 javascript 함수가 작동하지 않습니다.

Question

innerHTML을 사용하여 JAVSCRIPT를 통해 입력 태그를 만들면 onKeypress와 같은 이벤트의 javascript 함수가 작동하지 않습니다. 아래는 내가 사용하고있는 코드입니다. 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>');});