I've run into this problem many times as well. The issue is that your
click function is being bound more than once. To fix it, use
the .unbind() method. .unbind() without any parameters will unbind
everything bound to that element, including your .click() function.
However, if you wish to unbind only the click() function and nothing
else, then use .unbind('click'). Here's what your code may look like:
$('#delete').click(function() {
confirmAction('Weet je zeker dat je de geselecteerde
pagina\'s wiltverwijderen?', 'destroy');
$(this).unbind();
});
Notice the .unbind() at the end. This will prevent the bound .click()
function from stacking upon itself in future events.
See also: http://docs.jquery.com/Events/unbind
On Sep 24, 4:26 am, Fabdrol <fabd...@gmail.com> wrote:
> Hi guys,
>
> I'm facing this little problem, I've got a button toolbar, and users
> can select rows in a table. When they have selected some row's, they
> can click one of the buttons, and it invokes a callback.
>
> Problem is, when I click the first time, there's nothing wrong. But
> when I click the second time, it fires the callback two times, when I
> click the third time it fires the callback three times, and so on.
> That's a big problem, since the button is used to delete a page, and
> obviously it should delete it only once, since the AJAX would return
> an error ortherwise.
>
> The code is seperated in three blocks, first the the onclick on the
> button object, which invokes a function called confirmAction, taking
> to parameters. [1], a message for the users, [2] the name of the
> callback function. When the confirmation is confirmed, the
> confirmAction function calls the callback. As said before, when I
> click #delete once, it behaves like expected. But when I click the
> second time (without refresh) it runs the callback function twice,
> third time thrice, and so on.
>
> Below is my code...
>
> Thanks in advance!
>
> the onclick on the button object
> [code]
> $('#delete').click(function() {
> confirmAction('Weet je zeker dat je de geselecteerde
> pagina\'s wilt
> verwijderen?', 'destroy');
> });
> [/code]
>
> the confirmation (global for my app, that's why callback is an
> parameter)
> [code]
> var confirmAction = function(msg, callback) {
> var context = $('#confirmAction');
> $('p.msg', context).html(msg);
>
> $.blockUI({
> message: context,
> css: {
> border: 'none',
> padding: '15px',
> backgroundColor: '#000',
> '-webkit-border-radius': '10px',
> '-moz-border-radius': '10px',
> color: '#fff'
> }
> });
>
> $('#confirmYes').click(function() {
> $.unblockUI();
> base[callback](true);
> // [callback] is the function name, (true) the
> parameter.
> // base is global this cashed
> });
>
> $('#confirmNo').click(function() {
> $.unblockUI();
> return false;
> });}
>
> [/code]
>
> the callback:
> [code]
> var destroy = function(yesno) {
> var arr = new Array();
>
> if(yesno == true) {
> $('input.do').each(function() {
> if($(this).attr('checked') == true) {
> arr.push($(this).val());
> }
> });
>
> console.log(arr);
> }};
>
> [/code]
