Question

以下代码从xml文件中获取信息。我用一个按钮成功地呈现了每个星球的id和名称。

我想在按钮上添加onclick事件。现在的问题是：它确实添加了onclick事件，但仅限于循环中创建的最后一个按钮。

我做错了什么？为什么它不为每个按钮创建一个onclick事件，但仅针对循环中的最后一个事件？

function updatePlaneten() {
    var valDiv, planets, valButton, textNode;
    // Get xml files
    planets = this.responseXML.getElementsByTagName("planeet");
    // loop through the <planet> tags 
    for (var i = 0; i < planets.length; i++) {
        valDiv = ''; // clear valDiv each time loop starts

        // Get the id and the name from the xml info in current <planet> tag
        valDiv += planets[i].getElementsByTagName("id")[0].childNodes[0].nodeValue + "<br>";
        valDiv += planets[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br>";
        document.getElementById("planetenID").innerHTML += valDiv + "<br>";

        // Create button with a value and pass in this object for later reference use (valButton.object=this)
        valButton = document.createElement("input");
        //  valButton.setAttribute("planeetID", planets[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
        valButton.setAttribute("value", 'Meer info');
        valButton.setAttribute("type", 'button');
        valButton.id = (i + 1);
        valButton.object = this;    
        //
        // Here is the problem i cant get fixed
        //    
        //valButton.onclick = function(){ showinfo(); }
        valButton.addEventListener('click', showinfo);
        // Place the button on screen
        document.getElementById("planetenID").appendChild(valButton);
    }
}

// simple function to check if it works
function showinfo() {
    console.log(this.object);
    console.log(this.id);
}

Answer 1

问题在于这一行：

    // MOVING AND SAVING INCOMING PDF TO FILE MANAGER FROM INBOX

    let filemgr = NSFileManager.defaultManager()
    let docsDirURL = try! filemgr.URLForDirectory(.DocumentDirectory, inDomain: .UserDomainMask, appropriateForURL: nil, create: true)

    // Create a new folder in the directory named "Recipes"
    print("Creating new folder...")
    let documentsPath = NSURL(fileURLWithPath: NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true)[0])
    let newPath = documentsPath.URLByAppendingPathComponent("Recipes")
    do {
        try NSFileManager.defaultManager().createDirectoryAtPath(newPath.path!, withIntermediateDirectories: true, attributes: nil)
    } catch let error as NSError {
        NSLog("Unable to create directory \(error.debugDescription)")
    }

    // Then check if the Recipes directory exists. If not, create it
    let recipesURL = docsDirURL.URLByAppendingPathComponent("Recipes")
    if !filemgr.fileExistsAtPath(docsDirURL.path!) {
        do {
            try filemgr.createDirectoryAtURL(recipesURL, withIntermediateDirectories: true, attributes: nil)
            print("Directory created at: \(recipesURL)")
        } catch let error as NSError {
            NSLog("Unable to create directory \(error.debugDescription)")
            return
        }
    }

    // Move file from Inbox to Recipes Folder
    let incomingFileName = incomingFileTransfer.lastPathComponent!
    let startingURL = incomingFileTransfer
    let savePDFURL = recipesURL.URLByAppendingPathComponent(incomingFileName)

    if !filemgr.fileExistsAtPath(savePDFURL.path!) {
        do {
            try filemgr.moveItemAtURL(startingURL, toURL: savePDFURL)
        } catch let error as NSError {
            NSLog("Unable to move file \(error.debugDescription)")
        }
    }

当您设置innerHTML时，当前在其中的内容将被销毁并替换为新的html，这意味着现在所有旧按钮都被销毁并创建新按钮。以前连接的事件侦听器不会附加到新按钮。

相反，只需创建一个div / span或任何最有帮助的容器，添加你的行星文本或其他任何东西，然后使用appendChild

document.getElementById("planetenID").innerHTML += valDiv + "<br>";

您也可以使用insertAdjacentHTML

valDiv = document.createElement("div");
var id = planets[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
var name = planets[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
valDiv.innerHTML = id+"<br>"+name+"<br>";
document.getElementById("planetenID").appendChild(valDiv);

Answer 2

function updatePlaneten() {
    var valDiv, planets, valButton, textNode;
    // Get xml files
    planets = this.responseXML.getElementsByTagName("planeet");
    // loop through the <planet> tags 
    for (var i = 0; i < planets.length; i++) {

        (function(num){

            valDiv = document.createElement("div");

            // Get the id and the name from the xml info in current <planet> tag
            var id = planets[num].getElementsByTagName("id")[0].childNodes[0].nodeValue + "<br>";
            var name = planets[num].getElementsByTagName("name")[0].childNodes[0].nodeValue + "<br>";
            valDiv.innerHTML = id+"<br>"+name+"<br>";
           document.getElementById("planetenID").appendChild(valDiv);

            // Create button with a value and pass in this object for later reference use (valButton.object=this)
            valButton = document.createElement("input");
            //  valButton.setAttribute("planeetID", planets[i].getElementsByTagName("id")[0].childNodes[0].nodeValue);
            valButton.setAttribute("value", 'Meer info');
            valButton.setAttribute("type", 'button');
            valButton.id = (num + 1);
            valButton.object = this;    
            // FIX: PASS showinfo TO AN ANONYMOUS FUNCTION CONTAINING THE OBJECT
            valButton.addEventListener('click', function(){
             showinfo(valButton);   
            });
            // Place the button on screen
            document.getElementById("planetenID").appendChild(valButton);

        }(i));


    }
}

// simple function to check if it works
function showinfo(valButton) {
    console.log(valButton.object);
    console.log(valButton.id);
}

javascript将循环中的按钮添加到按钮中

2 个答案: