0

我需要访问我创建的自定义标签中的元素<multi-nav>。问题是在初始化这些元素后没有调用构造函数（这是预期的）。在此示例中，我无法访问 object 中显示的 form 标记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 文件中，（仅适用于谷歌浏览器）

<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 中的类生命周期有关。但我找不到合适的功能

4

1 回答 1

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().

于 2017-11-12T17:34:24.170 回答