未捕获的TypeError：xyz不是函数（当从内部字符串中调用时）

Question

尝试在输入模糊时绑定validate（）函数，如class Textbox扩展HTMLElement的渲染函数中声明的那样（部分A），但出现以下错误

detail.html：1未捕获的TypeError：this.validate不是函数（但是将validate（）函数放在字符串外部的函数调用之外时可以访问）

Part-A

class HTMLElement {
  constructor( ) {
    this.value = false;
  }

  validate() {
    console.log('A')
  }

}

class Textbox extends HTMLElement {
  constructor( ) {
    super();
  }

  render( elem_id, default_value, display_name, placeholder, permission ) {
    /*** this.validate() will work here but not inside onblur function ***/
    var string = "";
    string += "<input type='text' class='form-control' id='"+elem_id+"' value='"+default_value+"' placeholder='" + placeholder + "' onblur='this.validate()' >"
    return string;
  }

}

B部分

const ELEMENT_ARR = {
  "text":Textbox
}

class Elements {
  constructor( className, opts ) {
    return new ELEMENT_ARR[className](opts);
  }
}

function renderForm(){
  var ds = {
    "fields":[
      {"id":"f_name","type":"text","is_mandatory":1,"display_name":"First Name","default":"", "permission":"hidden/editable/readonly","placeholder":"Sample Placeholder 1" },
      {"id":"f_name","type":"text","is_mandatory":0,"display_name":"Hellp Name","default":"","permission":"hidden/editable/readonly", "placeholder":"Sample Placeholder 2"  }
    ]
  }, ks = JSON.parse(JSON.stringify(ds)), form_str="", elementor;

  for (let u = 0 ; u < ks['fields'].length; u++) {

    let type = ks['fields'][u].type,
        elem_id = ks['fields'][u].id,
        is_mandatory = ks['fields'][u].is_mandatory,
        default_value = ks['fields'][u].default,
        display_name = ks['fields'][u].display_name,
        placeholder = ks['fields'][u].placeholder,
        permission = ks['fields'][u].permission;

    elementor = new Elements( type )
    form_str += elementor.render( elem_id, default_value, display_name, placeholder, permission )
  }
  return form_str;
}

Part-C

window.onload = function(){

  document.getElementById('formGenx').innerHTML = renderForm();
};

我可能在做什么错？

Answer 1

问题是，您正在生成string，然后将其附加到DOM，仅在那时，它将被解析为DOM元素并添加到页面中。 render方法的上下文在[[outside的上下文中发生，并且没有链接到它或创建它的对象。此外，事件处理程序仅设置为将在全局上下文中执行的字符串"this.validate()"。

要保留对validate方法的访问，必须在执行render时将其附加为处理程序。我认为，解决此问题的最佳方法是避免生成字符串并以编程方式创建元素的步骤：

document.createElement将创建节点
• document.createElement可以添加属性
• [.setAttribute()和.setAttribute()您需要的任何类。
• 不是设置.classList属性，而是.classList添加适当的处理程序作为直接属性.add()

这将生成元素，然后可以将它们全部存储在.add()中，然后将它们一次全部添加到DOM中，这将节省您多次插入操作以及由于onblur而造成的潜在性能损失。

最后，可以通过普通的DOM API添加元素，但是通常.addEventListener()就足够了。

因此，我们得到以下信息：

.addEventListener()

but note that sometimes you might prefer the attribute.

a DocumentFragment

普通的JavaScript API在以编程方式创建元素时往往很冗长。当然，像jQuery这样的库实际上可以使它变得容易一些，但要付出另一个依赖的代价。尽管并非严格要求使用jQuery，但我仅演示如何以编程方式使用元素创建以供参考：
triggering reflow