jQuery-> XML->數組-動態創建的按鈕和鏈接

Question

是否簡單，但需要您的幫助：

我需要在jQuery中動態創建按鈕和鏈接。 從XML加載的數據放在一個數組中，現在：

您可以單擊“類別”，“用戶”等按鈕之一...它會啟動一個函數，該函數應該為每個類別創建一個按鈕，例如：讓我們創建一個將由這些按鈕啟動的函數：它將在XML中搜索categoryID attr，其中包含帶有“ something ...”的txt，並將其添加到#tester中：

function clickedCat(cat){
      alert("test btn" + cat); // to check if function started
      // here just some script search 'cat' in XML etc...
    })
}

現在該功能必須由動態創建的按鈕f.ex.觸發：

function showCatName(){
    $("#categories").html(" ");
    for(i=0;i<catArr.length;i++){
    qw = catIDArr[i];
    $("<div id='showCatName"+qw+"'></div>").html("<input id='showCatName"+qw+"' type='button' title='showCatName"+qw+"' value='showCatName"+qw+"' />")
                        .click(function(event){clickedCat(qw)}).appendTo("#categories");
    }
}

但是此處創建的按鈕對所有按鈕都具有相同的值-上一次加載的qw ...

問：如何讓它記住qw值-每個btn不同？ 因此btn [0]啟動qw [0]，btn [1]啟動qw [1]等...

第二件事-同樣的問題，但我需要將其輸入到html鏈接中：

function showCatName2(){
    $("#categories").html(" ");
    for(i=0;i<catArr.length;i++){
    qw2 = catIDArr[i];
    $("<div id='showCatName"+qw2+"'></div>")
    .html("<a href='#' onclick:clickedCat("+qw2+")> Test btn"+qw2+"</a>")
    .appendTo("#categories2");
    }
}

onclick似乎根本不起作用...

Q1：如何使其起作用，以便它將動態創建按鈕來啟動具有不同值的功能？

Q2：像上面，但不是按鈕，我需要將其放在鏈接中

預先感謝您的幫助，盧卡斯

Answer 1

您在使用showCatName()遇到關閉問題。 當你這樣說：

function(event){ clickedCat(qw) }

您正在將對qw的引用綁定到該函數，但這不會評估 qw 。 觸發點擊處理程序時，將評估qw變量，並且qw的值將是循環完成時的值； 所有點擊處理程序將具有相同的qw值，因為它們都共享完全相同的變量。 通常的解決方案是在構建點擊處理程序時強制評估qw ：

function make_click(qw) {
    return function() { clickedCat(qw); };
}
// ...
function showCatName(){
    $("#categories").html(" ");
    for(i=0;i<catArr.length;i++) {
        qw = catIDArr[i];
        $("<div id='showCatName"+qw+"'></div>")
            .html("<input id='showCatName"+qw+"' type='button' title='showCatName"+qw+"' value='showCatName"+qw+"' />")
            .click(make_click(qw))
            .appendTo("#categories");
    }
}

您可以使用立即執行的內聯函數代替make_click()但如果遇到閉包問題，上述內容可能會更清楚。

您的第二個不起作用，因為onclick:clickedCat在HTML中沒有任何意義。 也許您的意思是onclick=clickedCat 。 您可能會遇到用這種方法引用qw2問題。