Question

所以我假设这个功能

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>

修改

ballon1 = (text1) ->
  "<a href=\"#balloon1\">Open Modal</a>
  <blockquote class=\"balloon\" id=\"balloon1\">
  <p>#{text1}</p>
  <a href=\"#close\" title=\"Close\" class=\"close\">X</a>
  </blockquote>"

Answer 1

您需要屏蔽alert中的function：

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

因此：

＆＃13;

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

＆＃13;

Answer 2

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

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

在您自己的代码中如何工作的一个不相关的例子是这样的：

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

对于IE，这需要IE9作为最低要求。有关详细信息，请参阅MDN。

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

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

Answer 3

怎么回事？

您alert()在页面加载时执行，因为它是function call。当您的脚本执行到达您的作业

时

button.onclick = alert("bananas");

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

Javascript button.onclick没有像我想象的那样运作

3 个答案: