Question

I’m having a difficultly identifying the solution to a problem with strange onClick behaviour on an element on my page.

Basically I have multiple spans on a page which when they clicked on, the status of the record changes according to the requirement.

As the DB update is done via Ajax, I change the onClick event handler dynamically to if the user switches the record from active to revoked the onclick will change to call a method called setRevoked(), active; setActive().

An example of the span container is:

Activate

My setActive() method:

function setActive(tierId) {
        if (tierId) {
            console.log('active' + tierId);
            $.post("admin.php?module=clients&action=tier_activate", {'tierId':tierId,'clientId':1234> }, function(data) {
                clearMessages();
                var obj = jQuery.parseJSON(data);
                if(obj.message == 'success') {
                    var js = "setRevoke("+tierId+"); return false;";
                    var newClick = new Function(js);
                    $('#tier_' + tierId).attr({title: 'Revoke', onClick: ''}).click(newClick).text('Revoke');
                    addJavascriptMessage(obj.reason, "success");
                }
                else if (obj.message == 'failed') {
                    addJavascriptMessage(obj.reason, "error");
                }
            });
        }
        else {
            addJavascriptMessage('A valid status must be selected', "error");
        }
    }
}

The problem I’m encountering is for some reason the onclick gets into a loop and the more you press the onclick, the more calls to the DB are made until eventually too many are made and the browser crashes.

It’s very strange as there aren’t actually any loops involved; this is what is baffling me.

Answer 1

It looks like you’re depending on setting the onClick attribute to ” (blank) to try to clear existing click events. This will not work, you need to unbind previous jQuery events.