Question

在下面的代码中我有一个动态创建的文本框，在onfocus事件上我调用了一个javascript函数。我在页面加载时分配了onfocus事件值。在创建onfocus事件后它无法正常工作。请帮我解决问题。 Test1，Test2值在pageload上分配

function createFields(Test1,Test2) {
     var newdiv = document.createElement('div');
     if (type == "TextBox") {
         newdiv.innerHTML += 
            "<input class=\"form-control\" data-error=\"Please Provide " 
            + DisplayName 
            + "\" name=\"" 
            + Name 
            + "\" value=\"" 
            + FieldValue 
            + "\" onFocus=\"" 
            + HighlightField(Test1,Test2) 
            + "\"  id=\"" 
            + Name + "\"/>";
        $('#divComplete').append(newdiv);
    }
}

    function HighlightField(Test1,Test2) {

    }

Answer 1

关于onfocus事件我正在调用javascript函数

不，你不是。仔细看看这里发生了什么：

"onFocus=\"" + HighlightField(Test1,Test2) + "\"

您正在立即调用HighlightField() 并将其结果设置为onFocus处理程序。

除非该函数实际返回一串有效的JavaScript代码，否则生成的HTML可能如下所示：

onFocus=""

如果要在onFocus事件中调用该函数，请不要调用它。相反，只需在您正在创建的字符串中指定函数调用：

"onFocus=\"HighlightField(Test1,Test2)\""

编辑：鉴于您对问题的澄清，听起来您希望立即解释这些变量。但不函数调用本身。这将按照在该字符串中的其他任何位置完成的方式完成。像这样：

"onFocus=\"HighlightField(" + Test1 + "," + Test2 + ")\""

请注意，如果预期这些变量包含字符串数据，那么您还需要添加引号（因为需要引用字符串）：

"onFocus=\"HighlightField('" + Test1 + "','" + Test2 + "')\""

正如您可能已经开始注意到的那样，动态构建这样的代码有点笨拙。既然你正在使用jQuery，至少你应该删除内联事件处理程序并在代码的其他地方创建一个单独的事件处理程序。类似的东西：

$(document).on('focus', 'input.form-control', function () {
    // handle your focus event here
});

然后你不需要构建这个复杂的字符串。

从动态创建的文本框中调用Javascript函数

1 个答案: