0

非常に単純な HTML ページがあります。すべてがロードされた後、ユーザーはそれを完全に操作できます。ここで、ある時点で、ユーザーが要素をクリックします。ajax 呼び出しが行われ、新しいデータが要求されています。ユーザーが要求した要素 (同じページ上) でユーザーがクリックした前の要素を削除したい - 実際には DOM から古い要素を削除し、新しい要素を追加します。まあ、これもやりましたが、新しく作成した要素に関数を追加できません。これは私の機能です：

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

そして、このように要素に追加しようとしています

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

関数が呼び出され、innerHTML 要素に「undefined」を書き込みます。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 に答える