arslan arslan - 7 months ago 10
Javascript Question

Jquery onclick change dynamically

following is my JQuery onclick function. An event applied on image.

this code is changing onclick event depending on data values received.

I added a break point in code as shown below in code.
A strange thing that is happening is that on my first click interpreter pass through my code one time only which is normal.

but when i click 2nd time it pass 2 times

on third click it pass 4 times

5th click 8 and so on

i.e number of call backs invoke per click are increasing exponentially. Now my question is why this is happening.

NOTE: all variables are defined properly but for simplification i striped down rest of code.

updateUser = function (user, block) {
jQuery.ajax({
type: "POST",
url: "index.php?option=com_contentbuilder&controller=myActicateUser",
data: data,
dataType: "json",
success: function (data) {
if (data) {
var pinID = "#pin" + user;
user = data[0];
>>breakpoint if (data[1] === "0") {

jQuery(pinID).click(function () {
updateUser(user, "1")
});
jQuery(pinID).attr("src", tack);


} else if (data[1] === "1") {

jQuery(pinID).click(function () {
updateUser(user, "0")
});
jQuery(pinID).attr("src", tick);

}
}
}
});
}


what i have already tried is

if(data[1]==="1"){
jQuery(pinID).unbind();
jQuery(pinID).removeAttr("onclick");
jQuery(pinID).click(function(){updateUser(user,"0")});
}

Answer

Instead of Click,based on jquery plugin, You could use

jQuery(pinID).live("click",function(){updateUser(user, "1")})

or

jQuery(pinID).on("click",function(){updateUser(user, "1")})

May be This would help you out . Because these will dynamically bind and handle click event to your elements.