javascript - 自定义 HTML 标记内的元素未在构造函数中初始化

Question

我需要访问我创建的自定义标签内的元素 <multi-nav> 。 问题是初始化这些元素后不会调用构造函数(这是预期的)。在此示例中，我无法访问对象 formTag 中显示的表单标记。 .

MultiNav.js

class MultiNav extends HTMLElement { 
    get formTag() { 
        return this.getElementsByTagName("form")[0];
    }

    get selectTag() {
        return this.formTag.getElementsByTagName("select")[0];
    }

    constructor () {
        super();
        this.formTag.addEventListener('submit', function(evt) {
            evt.preventDefault(); // to avoid error, by stopping form from submitting
            console.log("submitting ...");  // doesn’t log because formTag isn’t retrieved
             this.formTag.submit();
        }); 
    }
}


window.customElements.define('multi-nav', MultiNav);

问题是调用 addEventListener 后抛出错误，浏览器说: Uncaught TypeError: Cannot read property 'addEventListener' of undefined

在 HTML 文件中，(仅适用于 google chrome)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>

<script type="text/javascript">
$(document).ready(function() { 
 $('input[name=toggle]').change(function(){
    $('#myform').submit();
});
});
</script>

<script language="javascript1.7" src="/js/MultiNav.js">

</script>
<multi-nav>
<form id='myform' action="/action_page.php" method="POST"> 
    <div>
        <label><input type="radio" name="toggle" value="20"><span>$20</span></label>
        <label><input type="radio" name="toggle" value="50"><span>$50</span></label>
        <label><input type="radio" name="toggle" value="100"><span>$100</span></label>
        <label><input type="radio" name="toggle" value="500"><span>$500</span></label>
        <label><input type="radio" name="toggle" value="1000"><span>$1000</span></label>
    </div>
    <select name="stuff" form="myform" title="category" onchange="this.form.submit()">
        <option value="category"><button selected disabled>Category<button></option>
        <option value="home"><button>Home<button></option>
        <option value="electronics"><button>Electronics<button></option>
        <option value="cars"><button>Cars<button></option>
    </select>
</form>
</multi-nav>

它应该与 JavaScript 中的类生命周期有关。但我找不到合适的功能

Answer 1

三个问题及解决方案:

• this.formTag未定义，因为自定义标记的实例是在加载文档之前创建的，因此 this.getElementsByTagName("form")[0]未定义。
  解决方案:放置 window.customElements.define('multi-nav', MultiNav); ready内回调函数。

• $('#myform').submit()将提交不带 submit 的表单事件被触发。
  解决方案:在 HTML 中包含一个不可见的提交按钮，并触发对其的点击，而不是调用 submit方法。

  <input type="submit" id="submitButton" style="display:none">
  

  JS:

  $('#submitButton').click();
  

• 在addEventListener内回调this不是指您的自定义对象，而是指您调用 addEventListener 的元素.
  解决方案:替换 this.formTag.submit();通过this.submit() .