动态地将div变成按钮

时间:2012-10-12 01:01:21

标签: javascript jquery html onclick

我似乎没有办法解决这个问题。所以我想我需要一些帮助.. 我正在制作一个我拥有sqlite数据库的phonegap应用程序。我执行查询并从数据库中获取动态创建的div中的结果,这就是我想要为每个记录提取以创建包含它的div,作为具有可编辑角色的按钮..

例如,假设我有一个数据库,这些列id为option1 option2,我有三个记录.. 这意味着我将有三个div 我想,每个div都是一个按钮,这样如果用户点击它就可以执行删除(或编辑/更新)查询而不用担心id 例如,如果他选择div2,则执行将删除第二条记录的查询..

我的代码到目前为止..

for (var i = 0; i < len; i++) {
    var test1 = results.rows.item(i).option1;
    var d = new Date();
    d.setTime(results.rows.item(i).date);
    var newLI = document.createElement("LI");
    newLI.className = lt;
    newLI.id = results.rows.item(i).id;
    var container = ("<div id=\"" + results.rows.item(i).id + "\" class=\"test\"><div id=\"text\">option1</div><div id=\"data\">" + test1 + "</div></div>");
    newLI.innerHTML = cont;
    var gl = document.getElementById("sqltest");
    gl.appendChild(newLI);
}
for (var i = 0; i < len; i++) {
    var divid = "#" + results.rows.item(i).id;
    $(divid).on("click", function () {
        alert(divid);
    })
}

<ul id="sqltest"></ul>

以上代码的问题是,虽然每个div都获得了正确的id,但是当我点击它时,我总是得到相同的结果#1虽然我可能有3个div .. 而不是结果

div1 alert #1 div2 alert #2 

我得到了

div1 alert #1 div2 alert#1

我使用警报只是为了简化它,而不是警报会有DELETE from SQLDB WHERE id=results.rows.item(i).id;

1 个答案:

答案 0 :(得分:1)

由于javascript范围和闭包的工作方式,您正在检索始终相同的'divid'变量。这是一个非常常见的错误。您可以谷歌“javascript closure infamous loop”获取更多相关信息。

您应该将替换为

for (var i = 0; i < len; i++) {

    (function () {
        var divid = "#" + results.rows.item(i).id;
        $(divid).on("click", function () {
            alert(divid);
        });
    })();
}

这样,变量 divid 每次都在不同的范围内声明。

我不明白这是否是您遇到的唯一问题。