Question

我有一个非常简单的HTML页面。加载完所有内容后，用户可以完美地与其进行交互。现在，在某些时候，用户点击一个元素。进行ajax调用并请求新数据。我现在想要删除用户在用户请求的元素（在同一页面上）上单击的前一个元素 - 实际上从DOM中删除旧元素并添加新元素。好吧，我也这样做了，但我无法为新创建的元素添加一个函数。这是我的功能：

setCountry = function(value){
  document.getElementById('country').innerHTML = value;
}

我试图将它添加到我的元素

a_tag.setAttribute("href", "javascript:setCountry(countries[i]);");

正在调用该函数并将“undefined”写入innerHTML元素。我使用for循环设置属性，然后在for循环上方，我从数组中提醒一个元素以确保它是正确的，并打印出正确的值。

我认为问题发生是因为函数是在DOM的第一次加载时创建的，但我不确定。任何人都可以了解这里真正发生的事情以及我应该做些什么来纠正它？我希望能够添加更多功能，以免寻找编写innerHTML标签的工作，我只是想了解我做错了什么。

谢谢。

使用更多代码编辑

//declare an array to hold all countries form the db
var countries = new Array();

function getCountries(region) {
    document.getElementById('scroller').innerHTML = '';

    //send the data to the server and retreive a list of all the countries based on the current region              
    $.ajax({
        type: "POST",
        url: "scripts/get_countries.php",
        data: {
            region: region
        },
        success: saveDataToArray,
        async: false,
        dataType: 'json'
    });

    //save the data to an array
    function saveDataToArray(data){
        var i = 0;
        while (data[i]){
            countries[i] = data[i];
            i++;
        }                           
    }

    scroller = document.getElementById('scroller');

    //create a ul element
    var holder = document.createElement("ul");

    //here create a back button which will recreate the whole list of regions

    var total = countries.length;
    for(i=0;i<total;i++){

    //create the first field in the list
    var bullet_item = document.createElement("li");

    //create an a tag for the element
    var a_tag = document.createElement("a");

    //set the redirect of the tag 
    a_tag.setAttribute("href", "javascript:setCountry(this);");

    //create some text for the a_tag
    var bullet_text = document.createTextNode(countries[i]);

    //apend the text to the correct element
    a_tag.appendChild(bullet_text);

    //apend the a_tag to the li element
    bullet_item.appendChild(a_tag);

    //apend the item to the list
    holder.appendChild(bullet_item);                        
}

//apend the holder to the scroller
scroller.appendChild(holder);   
            }

function setRegion(region){
    document.getElementById('region').innerHTML = region;
}

setCountry = function(value){
    document.getElementById('country').innerHTML = value;
}

Answer 1

不需要在字符串中引用代码。而不是：

a_tag.setAttribute("href", "javascript:...")

尝试形成一个闭包：

a_tag.onclick = function () { ... }

请注意，默认<A>元素没有HREF看起来不正常，但您可以使用CSS修复此问题。

Answer 2

问题解决了除了我声明href参数

之外，一切都很好

a_tag.setAttribute("href", "javascript:setCountry("+'"'+countries[i]+'"'+")");

这是通常的单引号和双引号游戏感谢大家提出想法。很多人一如既往地欣赏

阿德里安

在DOM中添加一个js函数？

2 个答案: