Question

I am trying to assign event handlers to my buttons in an array. When I press the button, it should call a function but just doesn’t and can’t figure out why.
Here is my code:

var btns = [];
    btns.push($('<div />').addClass('mvn_no mvn'));
    btns.push($('<div />').addClass('mvn_n mvn'));
    btns.push($('<div />').addClass('mvn_ne mvn'));
    btns.push($('<div />').addClass('mvn_o mvn'));
    btns.push($('<div />').addClass('mvn_c'));
    btns.push($('<div />').addClass('mvn_e mvn'));
    btns.push($('<div />').addClass('mvn_so mvn'));
    btns.push($('<div />').addClass('mvn_s mvn'));
    btns.push($('<div />').addClass('mvn_se mvn'));
    for ( var i = 0; i < btns.length; i++) {
        btns[i].mousedown(function() {
            moveImage(this);
        }).mouseup(function() {
            clearTimeout(tMovement);
        }).mouseout(function(){
            clearTimeout(tMovement);
        });
        table.find('td:eq(' + i + ')').append(btns[i]);
        $($options.expose.elementMovement).empty().append(table);

    }
    alert($._data( $("div.mvn_so"), "events" ));

Once this piece of code runs, I click on the buttons and nothing happens. I even tried calling a dummy function that only had an alert in it and it still doesn’t work. I also tried to get the event on a given element and it returns undefined. Any help is appreciated.

Answer 1

So, after hours of debugging, I finally found the culprit that was breaking my code. It was the goddamned .empty()
on $($options.expose.elementMovement).empty().append(table); when I removed it, the code worked just fine. I have no idea why it didn’t work as it was but I am glad it works now. Even putting the empty in separate line breaks my code.