CODEWITHSUNDEEP
jqueryajax
Chris Dowdeswell
Chris Dowdeswell

Reputation: 868

Why is this jQuery ajax click event firing multiple times?

I have tried unbinding the click event, but it fires sometimes twice sometimes 5 times!! Getting a bit fed up now!

Code from modal.asp

$("input[name=add_associate]").live("click",function(){
    var addassociateID = $(this).attr("id")

    $.ajax({
       type: 'POST',
       url: '/data/watchlist_save.asp',
       data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
       async:true,
       success: function(data) {
           $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",
           {cache:false},function() {
               $(".search_note").html(data)         
               $(this).unbind('click').bind('click',handler);                                                                                                
           })
       },
       error: function(data){
           $(".search_note").html(data)
       }
    });     
})

UPDATE:
Basically I am calling the following code into .associate_users

<div id="associate_list">
    <div class="associate_record">
        <div class="left" style="padding:8px;"><img src="../imgs/nopic-m.png" style="width:30px;height:30px;" class="img_border" /></div>
        <div class="left" style="padding-top:15px;">5)Neil Burton</div>
        <div class="right" style="padding-top:10px;margin-right:5px;"><input type="button" class="btn-blue" name="add_associate" id="890" value="Add"></div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>

FURTHER INFORMATION:
This only happens when I fire the event, close the modal dialog then re-open it with a different watchListID

THE STRUCTURE OF DATA:

Upvotes: 25

Views: 65504

Answers (8)

Partha
Partha

Reputation: 87

function myEventHandler(e)
{
    if(e.handled !== true)
    {
      // put your payload here.
      // this next line must be here
      e.handled = true;
    }
    return false;
}

Once an event is handled, the property handled can be set to true. So, check this whether it is still false before passing the control to your code. Found this here and it worked for me.

Upvotes: 0

Rajesh
Rajesh

Reputation: 3778

As I see, all you want to do is bind the event once and then die it. The latest jQuery versions have a .one() method, which will bind the event only once.

example:

$('#myDiv').one('click', function() {
    alert('clicked once...');
});

The next time you click, click event will not fire up.

More at http://api.jquery.com/one/

Upvotes: 16

KarasQ
KarasQ

Reputation: 378

I solved it like this:

    var liveActionRemove = $('#ajax-list-action-remove');

    $(liveActionRemove).live('click', function(){
        $(liveActionRemove).die('click');

        $.ajax({
            url: '/someurl',
            success: function(data){
            }
        });
    });

Upvotes: 1

mili
mili

Reputation: 81

This might be helpful - http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

Upvotes: 8

Chris Dowdeswell
Chris Dowdeswell

Reputation: 868

I have resolved this issue now, I was using 

$(document).ready

in the loaded ajax content along with...

<script src="/js/jquery-ui.js"></script>

So I presume it was doubling up the "live" function!

Thank you so much for the responses.

Upvotes: 7

Elliot Nelson
Elliot Nelson

Reputation: 11557

You can fix your problem in two ways:

1) Move your javascript code into main.asp, instead of modal.asp.

This will instantly fix your double-fire issue. You would have to modify your code slightly to pull the WatchListID value from some HTML inside modal.asp, rather than coding it directly as you are (since main.asp won't have that value yet.)

2) Keep your javascript code where it is, but stop using live events.

Use a simple ".click(function () {" call, instead of ".live('click', function() {".

You are reloading modal.asp each time the dialog opens, which means your javascript is being run every time it loads. If you keep your javascript code in modal.asp, then live() is probably not appropriate.

Upvotes: 4

DarthJDG
DarthJDG

Reputation: 16591

Watch your semicolons, make sure you end each command with one, will save you a headache later.

As for events bound by live(), they have to be unbound by calling die(). It has the same parameters as unbind(). Have a look at the documentation.

function ajaxHandler(){
    var addassociateID = $(this).attr("id");
    var $this = $(this);
    $this.die('click');

    $.ajax({
        type: 'POST',
        url: '/data/watchlist_save.asp',
        data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
        async: true,
        success: function(data) {
            $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",{cache:false},function(){
                $(".search_note").html(data);
                $this.bind('click',handler);
            });
        },
        error: function(data){
            $(".search_note").html(data);
            $this.live('click', ajaxHandler);
        }
    });     
}

$("input[name=add_associate]").live("click", ajaxHandler);

Edit: Forgot to add some important points. You have to unbind your live event right in the click handler and rebind it on error, just like @stefan suggested.

Also make sure you save the this object in a variable, as it's not pointing to your DOM element within the ajax callback function. Alternatively you can use the context property on your ajax request, check the documentation.

Upvotes: 17

stefan
stefan

Reputation: 2886

You are unbinding first afterwards the success. You need to unbind it in the click handler and then add it again onerror.

Upvotes: 2

Related Questions