CODEWITHSUNDEEP
jquery
southpaw93
southpaw93

Reputation: 1961

Jquery .click() building up a queue

So I have this function :

call up functions :

function tog_1(){
        $('.upload').dequeue().stop(true, true).hide(400);
        $('.post').dequeue().stop(true, true).show(400);
    }
    function tog_2(){
        $('.upload').dequeue().stop(true, true).show(400);
        $('.post').dequeue().stop(true, true).hide(400);
    }

 $(".status").on("click",".sts",function(){// status upload
            tog_1();
$(".post").click(function(){
                var message = $(".sts").val();
                if ((jQuery.trim( message) ).length!=0)
                {
                    $.post("load/post.php",{message : message, poster : <?php echo json_encode($_SESSION['id']); ?> , id : <?php echo json_encode($_SESSION['id']); ?> },
                        function(result){
                            $(".sts").css({"background":"rgba(255,255,255,0.5)","color":"rgba(0,0,0,0.3)","font-weight":"bold"});
                            $(".sts").animate({height:"20px"},"slow");
                            $(".sts").val("How do you feel?");
                            tog_2();
                            $('#history_t tr:first').fadeIn("slow").before(result);
                        });
                }
    });
        });

on this html:

<table class="upload" width="100%" height="30px">
                            <tr>
                                <td width="33%" valign="middle" current="1" nr_crt="1" class="sts_td" align="center"><p>Status</p></td>
                                <td width="33%" valign="middle" nr_crt="2" class="img_td" align="center"><p>Upload image</p></td>
                                <td width="33%" valign="middle" nr_crt="3" class="link_td" align="center"><p>Share link</p></td>
                            </tr>
                        </table>                        
                        <textarea name="status_write" class="sts" id="sts1" >How do you feel?</textarea>
                        <textarea name="image_upload" class="img" id="sts2">Drag and drop image.</textarea>
                        <textarea name="share_link" class="link" id="sts3">Share link.</textarea>

every time I press the textarea field the $(".post").click() builds up a queue and when I press post it sends the message to the database the number of times I have clicked the textarea field.... it's like the $(".post").click() builds up a queue,very strange. How can I stop it ? Thank you.

Upvotes: 0

Views: 88

Answers (1)

David
David

Reputation: 218827

This code:

$(".status").on("click",".sts",function(){

Is saying "run this function every time I click on an element matching ".sts". And this code:

$(".post").click(function(){

Is saying "run this function every time I click on an element matching ".post". So essentially, multiple clicks on ".sts" results in:

  • Run this function when I click ".post".
  • And then run this other function when I click ".post". (It doesn't matter that it's the same function.)
  • And then run this other function when I click ".post".
  • And then run this other function when I click ".post".

So when you click ".post", multiple functions run.

Since you're loading new content via AJAX and binding to that new content (which, I assume, contains ".post" in this case), then you may have a couple of options.

You could remove the click handler on ".post" before adding a new one. This could be as simple as adding something like this just before creating the click handler:

$('.post').off('click');

Or, depending on how the rest of your logic works, you may be able to use a deferred click handler for ".post", just like you're already using for ".sts". It's not really clear from your code why you would need to re-bind the click handler instead of using a deferred handler attached to a common parent element.

Upvotes: 1

Related Questions