with every toggle 1 ajax more is sent to php document

Question

So I have a function here that sends some data to a php file which then works with that data. Th ephp works fine but the jquery doesn´t: With every further click on one of those ".work" elements triggering that toggle function one ajax request more is sent to the php file if I hover over the ".postimagepic" element.

E.g. if I toggle the element once so that it becomes visible and hover over the photo it sends the ajax request as wanted only once every second. But if I click three times on that ".work" element and then hover over the ".postimagepic" element (which triggers the ajax while hovering) the ajax request is sent two times more often (so in total three times every second). And so it continues.

I working on that now for two days and still didn´t figure it out. Could anyone of you please help me? :]

jQuery:

 $(".work").click(function() {
     $(this).next().slideToggle('slow');

    var myInterval; // Define it here to make it global
    $(".postimagepic").hover(function () {
        var link = $(this).attr("src").split("/").pop().split(".", 1)[0];
        $("h1").text(link);
        myInterval = setInterval(function () {
        $.ajax({
            url: 'time.php',
            type: 'post',
            data: {
                'user':'<?php echo $_SESSION["login"] ?>',
                'topost':link
            },
            success: function() {

            }
        });
    }, 1000);
    }, function () {
        clearInterval(myInterval);
    });
});
$(".hiddenpost").hide();

HTML:

<div class="parent">
<div class="work">
    <table class="post">
        <tbody>
            <tr>
                <td class="postby">
                    <img class="postppic" src="propic/yy.jpg">
                </td>
                <td class="postcontent">
                    <p class="postusername">
                        <a href="yy-profile.php">yy</a>
                        posted: <br>
                        <p class="caption">caption?</p>
                    </p>
                </td>
                <td>
                    <div>   
                        <img class="postppic" src="images/yy.jpg">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="hiddenpost">
    <div>
        <div>
            <img class="postimagepic" src="images/yy.jpg">
        </div>
    </div>
</div>

Answer 1

I suspect you have binding issues with the hover event. Clicking for the first time binds the "hover" event with ".postimagepic" element. Clicking more times it rebinds and usually you end up in replicating the bindings and firing multiple times.

I had this issue long time and for me the best solution is to bind the event and perform manual unbind.

So, in your case, before you rebind the event, I would perform unbind/off in order to be sure. Try put this:

$(".postimagepic").off("hover");

and then bind it:

$(".postimagepic").on("hover", function(){....});

Source:

http://api.jquery.com/off/

http://api.jquery.com/on/

Answer 2

Every time you click you add another hover() event handler, hence another AJAX request. Move the hover() event handler outside of the click() handler so that it's only bound to the .postimagepic elements once, on load of the DOM. Try this:

var myInterval;

$(".work").click(function() {
    $(this).next().slideToggle('slow');
});

$(".postimagepic").hover(function() {
    var link = $(this).attr("src").split("/").pop().split(".", 1)[0];
    $("h1").text(link);
    myInterval = setInterval(function() {
        $.ajax({
            url: 'time.php',
            type: 'post',
            data: {
                'user': '<?php echo $_SESSION["login"] ?>',
                'topost': link
            },
            success: function() {}
        });
    }, 1000);
}, function() {
    clearInterval(myInterval);
});

$(".hiddenpost").hide();