1

HTML：

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
      <div class="micropostContent">
      </div
    </div>
    <div id='rightColumn'>
  </div>
</div>

前置：

$('.micropostContent').prepend('<%= j render("users/partials/micropost") %>');

一些功能：

$(".micropost_content").focus(function() {
    this.rows = 7;

    var micropostBox = $(this),
        xButton = $(this).parent().find(".xButton");


          micropostBox.hide().addClass("micropost_content_expanded").show().autoResize();  
          xButton.css("display", "block");

                xButton.click(function() {
                    micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
                    micropostBox.val("");
                    xButton.hide();


                });

});



$(".comment_box").focus(function() {
    this.rows = 7;

    var $commentBox = $(this),
        $form = $(this).parent(),
        $cancelButton = $form.children(".commentButtons").children(".cancelButton");

            $(this).removeClass("comment_box").addClass("comment_box_focused").autoResize();  
            $form.children(".commentButtons").addClass("displayButtons");

            $form.children(".commentButtons").children(".cancelButton");

                $cancelButton.click(function() {
                    $commentBox.removeClass("comment_box_focused").addClass("comment_box");
                    $form.children(".commentButtons").removeClass("displayButtons");
                    $commentBox.val("");


                });

});

$('.micropostOptions').on('click',function(){
    var postMenu = $(this).find('.postMenu');

    if(postMenu.is(':hidden') ){
        $('.postMenu').hide();
        $('.micropostOptions').removeClass("postMenuHoverState");
        postMenu.show();
        $(this).hide().addClass('postMenuHoverState').show(60);

    }else{
        postMenu.hide();
        $(this).removeClass("postMenuHoverState");
    }


});

停止工作的功能是焦点和点击功能。它们只有在刷新后才能再次工作，直到我发布另一条 ajax 消息/微博。

.comment_box 函数不适用于预先添加的消息，但它适用于所有先前的消息。.micropostOptions 功能并非全部工作。然后刷新后一切正常。

我错过了什么吗？

亲切的问候

4

1 回答 1

3

因为事件仅在您声明它们时绑定到现有项目.. 声明使用 on 并附加到父元素

$(document).on("focus", ".comment_box", function() {
//this will work with new elements 
});

父级越接近您要附加功能的元素越好，例如父级容器“.cf”或“.microposts”，而不是您的案例中的文档。

详细地说，在您的示例中，您只是将事件绑定到单个元素，并且当添加新项目时，它们没有相同的事件绑定......当您将事件绑定到更高级别的元素时，那么您就是基本上是说“将此处理程序应用于此父元素内与此选择器匹配的所有内容”。

于 2012-04-09T21:18:54.393 回答