0

所以我有这个功能：

调用函数：

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);
                        });
                }
    });
        });

在这个 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>

每次我按下 textarea 字段时，都会$(".post").click()建立一个队列，当我按下 post 时，它会按照我点击 textarea 字段的次数将消息发送到数据库......这就像$(".post").click()建立一个队列，非常奇怪。我怎样才能阻止它？谢谢你。

4

1 回答 1

1

这段代码：

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

说“每次我点击一个匹配的元素时运行这个函数".sts"。这段代码：

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

是说“每次我点击一个匹配的元素时运行这个函数".post"。所以本质上，多次点击".sts"会导致：

  • 单击时运行此功能".post"。
  • 然后在我单击时运行其他功能".post"。（没关系，它是相同的功能。）
  • 然后在我单击时运行其他功能".post"。
  • 然后在我单击时运行其他功能".post"。

因此，当您单击 时".post"，会运行多个功能。

由于您通过 AJAX 加载新内容并绑定到该新内容（我假设".post"在这种情况下包含），因此您可能有几个选择。

您可以在添加新的之前删除点击处理程序。".post"这可以像在创建点击处理程序之前添加这样的东西一样简单：

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

或者，根据其余逻辑的工作方式，您可以使用延迟点击处理程序 for ".post"，就像您已经在使用 for 一样".sts"。从您的代码中并不清楚为什么您需要重新绑定单击处理程序而不是使用附加到公共父元素的延迟处理程序。

于 2013-07-13T12:54:15.960 回答