我需要访问我创建的自定义标签中的元素<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 中的类生命周期有关。但我找不到合适的功能