Warum funktionieren die meisten meiner jquery-Funktionen nicht mehr, nachdem eine Nachricht an eine vorhandene Nachrichtenliste angehängt wurde?

Question

HTML:

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

Prepend:

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

Einige der Funktionen:

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


}); 

Die Funktionen, die den Fokus nicht mehr funktionieren und Funktionen klicken. Sie funktionieren erst wieder nach dem Auffrischen, bis ich eine weitere Ajax-Nachricht/Micropost poste.

Die Funktion .comment_box funktioniert nicht bei der Nachricht, die vorangestellt wurde, aber sie funktioniert bei allen vorherigen Nachrichten. Die Funktion .micropostOptions funktioniert nicht alle. Nach dem Auffrischen funktioniert alles gut.

Fehle ich etwas?

Mit freundlichen Grüßen

Answer 1

Da die Ereignisse nur auf vorhandene Elemente gebunden sind, wenn man sie erklären .. erklären zu einem übergeordneten Elemente anstelle

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

Je näher die Eltern an das Element mit auf und befestigen sind Sie fügen Funktionalität an den besseren an, zum Beispiel den übergeordneten Container ".cf" oder ".microposts" anstelle von Dokument in Ihrem Fall.

Um zu erläutern, binden Sie in Ihrem Beispiel nur Ereignisse an die einzelnen Elemente, und wenn neue Elemente hinzugefügt werden, haben sie nicht die gleichen Ereignisbindungen ... Wenn Sie das Ereignis an ein Element höherer Ebene binden , dann sagen Sie im Grunde: "Wenden Sie diesen Handler auf alles innerhalb dieses übergeordneten Elements an, das mit diesem Selektor übereinstimmt".