Javascript 为什么我的大多数jquery函数在将消息预先添加到现有消息列表后停止工作？

HTML:

停止工作的功能是焦点和单击功能。在我发布另一条ajax消息/micropost之前，它们只能在刷新后再次工作

.comment_box函数不适用于预先添加的消息，但适用于以前的所有消息。.microStoptions函数并不能完全工作。然后在刷新之后，一切都正常

我错过什么了吗

---

亲切问候

，因为事件仅在声明时绑定到现有项。。声明使用on并改为附加到父元素

$(".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");
    }


});

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

---

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

这很好。。是否可以将其应用于整个文档，而不是应用于每个函数？不，这没有什么意义。这是一种不同的方法来绑定方法，而不是改变绑定的工作方式。这会创建委托处理程序而不是直接绑定东西，不会有一种方法来为我生成的每个绑定事件编写，假设我打算生成一个委托？相反，从现在开始，如果您认为有可能向页面添加元素，只需使用.on创建一个委托即可。此外，如果对您有效，请随时将其标记为答案；）

$('.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");
    }


});

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