Question

我有一个javascript函数，它使用jquery附加一个文本框，该文本框具有调用另一个javascript函数的onkeypress属性。我的问题是，当我尝试将我的contentItem对象传递给javascript方法时，在该方法中调用时没有定义它。

这是我的jquery代码，它附加了javascript函数（它是动态的，并且命名为checkMethodName的值）。

$(element).append('<div id="' + id + 'div" style="position: relative;display:none; cursor: default"><p id="' + id + 'lbl"> ' + initStatusMessage + '</p><input type="text" name="' + id + '" id="' + id + '" onkeypress="return ' + checkMethodName + '(event, ' + id + ', contentItem)" /></div>');

我也试过这个（我最终得到一个语法错误，意外的标识符）：

$(element).append('<div id="' + id + 'div" style="position: relative;display:none; cursor: default"><p id="' + id + 'lbl"> ' + initStatusMessage + '</p><input type="text" name="' + id + '" id="' + id + '" onkeypress="return ' + checkMethodName + '(event, ' + id + ', ' + contentItem + ')" /></div>');

我觉得出现问题是因为它是纯文本，但事件对象正确传递...

这是被调用的方法，它无法看到contentItem对象：

function checkValidAuditor(e, id, contentItem) {
var statusmessage = $('#' + id.id + 'lbl');
if (e.keyCode == 13) {
    $.ajax({
        url: "/ApplicationData.svc/Employees?$filter=AuthCode eq '"+ id.value +"'",
        dataType: 'json', 
        success: function (json) {
            if (json.value[0] == null) {
                statusmessage.text("ERROR: Unauthorized.");
                statusmessage.css({ "color": "red", "font-size": "20px" });
            } else {
                if (json.value[0].Employee_EmployeeType == 2) {
                    statusmessage.text("Successful Authentication");
                    statusmessage.css({ "color": "green", "font-size": "20px" });
                    contentItem.screen.JobData.JobOperator.value = id.value;
                    $.unblockUI();
                } else {
                    statusmessage.text("ERROR: Auditors only. Please scan again.");
                    statusmessage.css({ "color": "red", "font-size": "20px" });
                }
            }
        },
        error: function (e) {
            alert(e);
            console.log(e);
        }
    });
    return false;
}

}

这是jquery附加的完整函数：

function createBarcodeAuth(element, contentItem, id, type, autostart) {
//Set Initial Value
var initVal;
var initStatusMessage;
var checkMethodName;
if (contentItem.value == null) {
    initVal = "";
} else {
    initVal = contentItem.value;
}
contentItem.value = initVal;

switch (type) {
    case "auditor":
        initStatusMessage = "Please scan Auditor's barcode.";
        checkMethodName = "checkValidAuditor";
        break;
    case "operator":
        initStatusMessage = "Please scan Operator's barcode.";
        checkMethodName = "checkValidOperator";
        break;
    case "setup":
        initStatusMessage = "Please scan Setup's barcode.";
        checkMethodName = "checkValidSetup";
        break;
    case "job":
        initStatusMessage = "Please scan Job's barcode.";
        checkMethodName = "checkValidJob";
        break;
    case "default":
        break;
}
$(element).append('<div id="' + id + 'div" style="position: relative;display:none; cursor: default"><p id="' + id + 'lbl"> ' + initStatusMessage + '</p><input type="text" style="position: absolute; top: 9999px; name="' + id + '" id="' + id + '" onkeypress="return ' + checkMethodName + '(event, ' + id + ', ' + contentItem + ')" /></div>');

var lock = window.setInterval(function () {
    document.getElementById(id).focus();
}, 200);

var barcodeauth = $("#" + id);

barcodeauth.on("change", function () {
    contentItem.value = barcodeauth.val();
});

if (autostart) {
    $.blockUI({
        message: $('#' + id + 'div'),
        css: {
            width: '275px',
            height: '75px'
        }
    });
}

}

Answer 1

这里的问题是范围的缩小。使用元素的内联属性创建的事件始终在全局范围内执行，因此它们只能访问全局可用的属性。解决问题的最佳方法是停止使用事件的内联属性。

$(element).append('<div id="' + id + 'div" style="position: relative;display:none; cursor: default"><p id="' + id + 'lbl"> ' + initStatusMessage + '</p><input type="text" name="' + id + '" id="' + id + '" /></div>')
    .find("div:last input").on("keypress",function(event){
        checkMethodName(event, id, contentItem);
    });

将Javascript对象传递给html，然后返回到javascript

1 个答案: