jQuery-> XML->数组 - 动态创建的按钮和链接

Question

是或不是简单，但需要您的帮助：

我需要在 jQuery 中动态创建按钮和链接。 从 XML 加载的数据被放入一个数组中，现在：

您可以单击“类别”“用户”等按钮之一... 它启动一个函数，为每个类别创建一个按钮 例如： 让我们创建一个将由这些按钮启动的功能： 它将搜索包含带有“something...”的txt的XML，并将其添加到#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 的引用问题。