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 () {

Solution 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;