0

ここから続けます...問題が大幅に変化したため（私の意見では）

ここに私のコードがあります

        for (var i = 0; i < len; i++) {
            (function () {
                var queryid = results.rows.item(i).id; //sql primary key
                var divid = "#" + queryid; //assigned id to divs
                var pressTimer;
                $(divid).mouseup(function(){ //func to handle tap + hold
                clearTimeout(pressTimer)
                // Clear timeout
                return false;
                }).mousedown(function(){
                // Set timeout
                pressTimer = window.setTimeout(function() {
                alert(divid);
                $(".somediv").show();
                $("#anotherdiv").hide();
                $("#button").on("click", function(){
                    var db = window.openDatabase("mydb", "1.0", "mydb", 200000);
                    db.transaction(editrow);    
                    function editrow(tx){
                        var value1 = $("#inputbox1").val();
                        var value2 = $("#inputbox2").val();
                        tx.executeSql("UPDATE mydb SET column1 = " + value1 + ", column2 = " + value2 + " WHERE id = " + queryid);
                        alert(divid); ********
                        successCB();} //query function
                })
                },1000)
                return false; 
                });
                })();
            }

divをクリックして値を編集すると、それらは正常に送信されます...ただし、その後別のdivを選択してそのフィールドを更新すると、新しい値は選択したdivと前の両方に更新されます選択された部門..

たとえば、div1 を選択して値を更新すると、すべて問題ありません

その後、div2 を選択すると、div1 と div2 の両方の値が div2 の最新の値で更新されます

4

1 に答える 1

1

イベントを複数回バインドしています。divのすべてのマウスダウンで、クリックイベントをボタンにバインドしています。jqueryで「on」または「click」を呼び出すときにイベントハンドラーを割り当てていません。ハンドラーを追加しています。

setTimeout の呼び出しが必要かどうかわかりませんでした。

このアプローチを試してみてください：

var lastClickedId = null;
function editrow(tx) {
    var value1 = $("#inputbox1").val();
    var value2 = $("#inputbox2").val();
    var queryid = lastClickedId;
    tx.executeSql("UPDATE mydb SET column1 = " + value1 + ", column2 = " + value2 + " WHERE id = " + queryid);
    alert(queryid);
    lastClickedId = null;

    successCB();
} //query function

$("#button").on("click", function(){

    if(lastClickedId != null)
    {
        var db = window.openDatabase("mydb", "1.0", "mydb", 200000);
        db.transaction(editrow);
    }
});

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

    (function () {
        var queryid = results.rows.item(i).id; //sql primary key
        var divid = "#" + queryid; //assigned id to divs

        $(divid).click(function(){
            lastClickedId = queryid;
        });
    })();
}

アップデート：

bind(func)、on(func)、click(func)などを使用してjqueryの要素をバインドすると、イベントが発生するたびに呼び出される関数funcを登録します。関数はいくつでも登録できます。たとえば、次のようにします。

$("#div1").on("click", function() { alert("hello"); });
$("#div1").on("click", function() { alert("world"); });

クリックすると、2 つのアラートが表示されます。これは、jquery がイベントを管理する方法によるものです。イベントで渡したすべての関数を呼び出します。

on を使用してその要素 (または複数の要素) にアタッチしたすべてのクリック イベントをデタッチするには、次のようにします。

$("#div1").off("click");

「純粋な」JavaScriptでは、これを行うことができます：

var div1 = document.getElementById("div1");

div1.onclick = function() { alert("hello"); };
div1.onclick = function() { alert("world"); };

この 2 番目の例では、関数 onclick に値を直接代入しているため、アラートは 1 つだけ呼び出されます。イベントを削除するには:

div1.onclick = null;
于 2012-10-13T04:48:04.097 に答える