Javascript button.onclick 没有像我想的那样运行答案

【问题标题】：Javascript button.onclick not functioning like I thoughtJavascript button.onclick 没有像我想的那样运行
【发布时间】：2015-04-24 17:20:09
【问题描述】：

所以我是在假设这个函数

button.onclick = exampleFunk;

当我单击每个按钮时会给我一个处理程序，但它没有。替换为：

button.onclick = alert("bananas");

我在页面加载时收到警报。这个问题已经解决了：

    button.setAttribute("onclick", "removeIssue(this)");

出于好奇……发生了什么事？

编辑后的布局

编辑

var issues = [];

window.onload = function () {
    //alert("venster geladen");
    issuesToList()
}



function issuesToList(data) {
    /*alert( 
        "array length is " + data.issues.length + "\n" +
        "total_count is " + data.total_count + "\n" +
        "limit is " + data.limit + "\n" + 
        "offset is " + data.offset + "\n" + ""
        );*/

    for (i = 0; i < data.issues.length; i++) {
        issue = data.issues[i];
        createIssue(issue);
    }
}


function createIssue(issue){


    var id = issue.id;
    var tracker = issue.tracker;
    var status = issue.status;
    var priority = issue.priority;
    var subject = issue.subject;
    var description = issue.description;
    var assignee = issue.assignee;
    var watchers = issue.watchers;

    var ticket = new Issue(id, tracker, status, priority, subject, description, assignee, watchers);
    issues.push(ticket);

    var button = document.createElement("button");
    button.innerHTML = "-";


    button.onclick = function (){ alert("bananas")};
    //button.setAttribute("onclick", "removeIssue(this)");

    var item = document.createElement("div");       
    item.setAttribute("id", id);
    item.appendChild(button);
    item.innerHTML += " " + subject;

    var container = document.getElementById("container");
    container.appendChild(item);


}


function removeIssue(e){
    var key = e.parentNode.getAttribute("id");
    var count = issues.length;

    if(confirm("Confirm to delete")){
        for(i=0; i<count; i++){
                if (issues[i].id == key ){
                issues.splice(i,1);
                var element = document.getElementById(key);
                element.parentNode.removeChild(element);
            }
        }
    }
}


function Issue(id, tracker, status, priority, subject, description, assignee, watchers){
    this.id = id;
    this.tracker = tracker;
    this.status = status;
    this.priority = priority;
    this.subject = subject;
    this.description = description;
    this.assignee = assignee;
    this.watchers = watchers;
}

编辑

<body>

    <h1>List of Issues</h1>
    <div id="container"></div>

    <script src="http://www.redmine.org/issues.json?limit=10&callback=issuesToList"></script>


</body>

【问题讨论】：

你可以试试这个 button.addEventListener("click", function() { alert("alert");}); ?
button.addEventListener("click", alert("alert"));我试过这个。因为你的@sushil 也没有工作。再次获取页面加载警报
尝试在 onload() 函数中调用它
您的代码需要您添加文本节点，而不是修改父对象的innerHTML。请参阅我的答案以及更新的信息和一个工作示例。

标签： javascript button onclick eventhandler

【解决方案1】：

您需要在function 中屏蔽alert：

button.onclick = function (){ alert("bananas")};

这样：

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t); 
btn.onclick = function() {alert("bananas")};
document.body.appendChild(btn);

【讨论】：

添加到我的时候不起作用，请给出完整代码

【解决方案2】：

怎么了？

你 alert() 在页面加载时被执行，因为它是 function call。当你的脚本执行到你的任务的那一行时

button.onclick = alert("bananas");

实际上是在执行警报语句，而不是将其分配给button.onclick

【讨论】：

不调用函数没有按钮...所以这里不应该使用语句？
要分配它，请将其包装在 function 中，以便仅在 click 上执行

【解决方案3】：

您可以将参数绑定到函数，以便它使用您的参数返回您希望它调用的函数（稍后传递的附加参数添加到末尾）。这种方式不需要编写无关代码（当您只想调用一个函数时）并且看起来更时尚。请参阅以下示例：

button.onclick = alert.bind(window, "bananas");

在您自己的代码中如何工作的一个无关示例如下：

var alert2 = alert.bind(window, 'Predefined arg');
alert2(); // 'Predefined arg'
alert2('Unused'); // 'Predefined arg'

对于 IE，这至少需要 IE9。请参阅MDN 了解更多信息。

编辑：我仔细查看了您的代码，需要进行一项重大更改才能使其正常工作...当您添加 JavaScript 时，您无法添加到 innerHTML子元素的属性。更改父元素的 innerHTML 会将您的元素转换为 HTML，它不会具有您之前创建的 onclick 属性。使用element.appendChild(document.createTextNode('My text'))动态添加文字。

在此处查看功能示例：http://jsfiddle.net/2ftmh0gh/2/

【讨论】：

那么我如何将它附加到 removeIssue() 函数。 removeIssue.bind() 不起作用。
你想使用removeIssue.bind(window, item)。第一个参数是您希望 this 用于该函数的内容（如果您不需要它，只需始终使用 window），第二个参数是函数将读取的第一个参数。它使用您在第一次调用该行时有权访问的变量，而不是稍后单击按钮时访问的变量。
要使用点击事件传递给函数的变量，您只需使用button.setAttribute("onclick", removeIssue); 和this，removeIssue 将是按钮元素，而e/第一个参数将是点击事件数据。