这是我的代码:
The action 'index' could not be found for VotesController
let navi = document.createElement("nav");
let navItems = {
home:"/",
my_profile:"/me"
};
let btnClasses = ["bttn-minimal","bttn-md","bttn-primary"];
const redirector = ()=>{
window.history.pushState(null,null,this.getAttribute("data-to"));
};
for(let i in navItems){
let navItem = document.createElement("button");
for(let c=0;c<btnClasses.length;c++){
navItem.classList.add(btnClasses[c]);
}
navItem.innerHTML = i.toUpperCase().replace(/_/g," ");
navItem.setAttribute("data-to",navItems[i]);
navItem.classList.add("navi-item");
navItem.addEventListener("click",redirector);
navi.appendChild(navItem);
}
document.getElementById("navi").appendChild(navi);
无效。脚本标记位于body标记的末尾。我也尝试过使用
navItem.addEventListener("click",redirector);
并且它是一样的。不仅它不起作用我无法在chrome dev工具中看到事件监听器。请帮忙。
我尝试使用常规功能,但它是一样的。有两个原因:
另外,我正在调用Browserify本地需要的代码。
答案 0 :(得分:0)
您的问题是您使用Arrow function作为事件处理程序。
箭头函数没有自己的this
对象;相反,他们使用围绕它们的this
范围。
如果在事件处理程序中需要this
,请使用常规函数而不是箭头函数。
const redirector = function () {
window.history.pushState(null,null,this.getAttribute("data-to"));
};
答案 1 :(得分:0)
您的事件监听器工作正常:
let navi = document.createElement("nav");
let navItems = {
home:"/",
my_profile:"/me"
};
let btnClasses = ["bttn-minimal","bttn-md","bttn-primary"];
const redirector = ()=>{
alert('click!');
//window.history.pushState(null,null,this.getAttribute("data-to"));
};
for(let i in navItems){
let navItem = document.createElement("button");
for(let c=0;c<btnClasses.length;c++){
navItem.classList.add(btnClasses[c]);
}
navItem.innerHTML = i.toUpperCase().replace(/_/g," ");
navItem.setAttribute("data-to",navItems[i]);
navItem.classList.add("navi-item");
navItem.addEventListener("click",redirector);
navi.appendChild(navItem);
}
document.getElementById("navi").appendChild(navi);
&#13;
<div id="navi"></div>
&#13;
但是,正如Xufox和PeterMader提到this
没有引用点击的按钮......
您可以通过这种方式解决方法:
const redirector = e => {
window.history.pushState(null, null, e.target.getAttribute("data-to"));
};