JQuery AJAX call doubling in Internet Explorer

I'm currently working on a page using JQuery that calls itself with AJAX whenever a particular div is clicked. When I load the page in Firefox, it works fine. However, in both IE8 and Opera, the AJAX calls are doubling every time I click the div.

I have created a simplified example page to illustrate the problem (save as ajaxtest.htm)

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $(".foo").live("click",function(){
        $.ajax({
            url:"ajaxtest.htm",
            type: "POST",
            success:function(html){
                $("body").append(html)                      
            }
        });
    });
});
</script>
<body>
<div class="foo">
    <p>Foo.</p>
</div>
</body>

When clicking the "foo" div in Firefox, a single additional div will appear. In IE8 however, it will double every time. This doubling occurs behind the scenes when using .html instead of .append in JQuery as well -- I just used append for illustrative purposes.

I am in the process of moving the processing code for my AJAX call into a separate file, but I was just wondering why this happens in browsers other than Firefox, and if there is a way to fix it.

ansaurus

tags:

views:

answers:

JQuery AJAX call doubling in Internet Explorer

related questions