javascript keeps looping

问题

continuing from here ... since the problem has signifally altered (in my opinion)

here is my code

        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; 
                });
                })();
            }   

if i click on the div and i edit the values, they are submitted successfully... however, if after that i select another div to update its fields, then the new value is updated both to selected div, as well as to the previous selected div..

for instance i select div1 and update the values everything is ok

if after that i select div2 then both div1 and div2 values are update with more recent values for div2

回答1:

You are binding the events more than once. In every mousedown on the div, you are binding a click event to the button. You are not asigning the event handler when you call "on" or "click" in jquery, you are adding a handler.

I didn't understand if you need the call to setTimeout.

Try this aproach insted:

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;
        });
    })();
}

UPDATE:

When you bind elements in jquery using bind(func), on(func), click(func), etc, you are registering the function func to be called whenever the event ocurrs. You can register any number of functions. So, for example, if you do:

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

It will display two alerts when you click. This is because of the way jquery manages events. It calls every function you passed in the event.

To detach all the clicks events you atached to that element (or elements) with on, just do:

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

In "pure" javascript you can do this:

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

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

And in this second example, only one alert will be called, because you are directly asigning a value to the function onclick. And to remove the event:

div1.onclick = null;

来源：https://stackoverflow.com/questions/12869663/javascript-keeps-looping