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 に答える