jQuery函数仅每秒有效

巴托斯·尤尔基维奇（Bartosz Jurkiewicz）

所以我有这样的布局：

   <div class="sidebar">
   <div class="tabs">
      <div class="comments">
         <a href="#" class="c_button">Comments</a>
      </div>
      <div class="todo">
         <a href="#" class="t_button">To Do list / notes</a>
      </div>
      <div class="content">
         <div class="comments_cnt">
            Comments
            <form>
               <input type="text" value="write" id="post">
            </form>
            <br />
            <a href="javascript:void(0)" onclick="post()">Post it</a> <br />
         </div>
         <div class="todo_cnt">
            To do
         </div>
      </div>
   </div>
</div>

这是jquery：

   <script>
    $(document).ready(function() {
        $(".c_button").click(function() {
            {
                $(".todo_cnt").css("opacity", "0");
            } {
                $(".comments_cnt").css("opacity", "1");
            } {
                $(".comments").css("border-bottom", "0px")
            } {
                $(".todo").css("border-bottom", "1px solid black")
            }
        })
        $(".t_button").click(function() {
            {
                $(".todo_cnt").css("opacity", "1");
            } {
                $(".comments_cnt").css("opacity", "0");
            } {
                $(".comments").css("border-bottom", "1px solid black");
            } {
                $(".todo").css("border-bottom", "0px")
            }
        })
    })
</script>
<script>
    function post() {
        var post = $("#post").val(); {
            $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>');
        } {
            $("#post").val('');
        }
        $('.resolve_button').click(function() {
            $(this).parents(".post_unrslvd").toggleClass('post_rslvd');
        });
    };
</script>

并且我希望能够添加可以被标记为以后解决的帖子。问题在于该toggleClass功能仅适用于第二个帖子，我不明白为什么？

阿伦·P·约翰尼（Arun P Johny）

问题是您要向元素添加重复的事件处理程序。

function post() {
    var post = $("#post").val();
    $('.comments_cnt').append('<div class="post_unrslvd">' + post + '<p><a href="#" class="resolve_button">Mark as resolved.</a></p></div>');
    $("#post").val('');
};

//dom ready handler
jQuery(function ($) {
    //delegated event handler
    $('.comments_cnt').on('click', '.resolve_button', function () {
        $(this).closest(".post_unrslvd").toggleClass('post_rslvd');
    })
})

演示：小提琴

那是在第一次调用中有一个单击处理程序，resolve_button因此切换效果很好...但是当post第二次调用时，resolve_button在第一次调用中添加的按钮将获得另一个单击处理程序（现在有2个）处理程序）...因此两次触发切换，从而消除了效果。

演示：问题-查看控制台以查看调用了多少次

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。