0

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

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

我正在尝试像这样将它添加到我的元素中

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

正在调用该函数并将“未定义”写入 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;
}
4

2 回答 2

0

问题已解决
除了我声明 href 参数的方式之外，一切都很好 

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

这一切都是平常的，单引号和双引号的游戏。
感谢大家提出想法。像往常一样非常感谢

阿德里安

于 2012-06-07T19:36:07.640 回答
0

无需在字符串中引用代码。而不是这个：

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

尝试形成一个闭包：

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

请注意，默认情况下没有的<A>元素HREF看起来不正常，但您可以使用 CSS 修复它。

于 2012-06-07T18:13:45.870 回答