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

javascript函数在innerHTML中不起作用

1 个答案: