Question

由于某种原因附加的数据点击事件不起作用，如果我点击有用的用户名，但是删除和显示评论按钮不是真的是奇怪的

附加数据

<div class="event">
    <div class="label">
      '.HTML::image($this->post->user->profileImageMini(), "").'
    </div>
    <div class="content">
      <div class="date">
        '.$this->post->created_at->diffForHumans().'
      </div>
      <div class="summary">
         <a href="'. url($this->post->user->username) .'">
            '. $this->post->user->name() .'
            <small>'. '@'.$this->post->user->username .'</small>
         </a>
      </div>
      <div class="extra text">
        '.linkify_post($this->post->body).'
      </div>
      <div class="feed-options pull-right">
        <a href="#" data-id="'. $this->post->id .'" class="delete-post"><i class="trash icon"></i>Törlés</a>
        <span>-</span>

        <a href="#" data-id="'. $this->post->id .'" class="comment-post"><i class="chat icon"></i>Hozzászólás (<span class="comment-count">0</span>)</a>
    </div>
    </div>
</div>'

单击这些2

时单击事件不起作用

<a href="#" data-id="'. $this->post->id .'" class="delete-post"><i class="trash icon"></i>Törlés</a>


<a href="#" data-id="'. $this->post->id .'" class="comment-post"><i class="chat icon"></i>Hozzászólás (<span class="comment-count">0</span>)</a>

的jQuery

    $('.comment-post').on('click', function(){
        var post = $(this).data('id');

        $('#'+post).find('.ui.comments').toggle();
        return false;
    });



    $('.delete-post').on('click', function(){
        var post = $(this).data('id');
        $.post('posts/delete', { postId: post }, function(){
            $('#feed-wrapper #'+post+'').toggle( "highlight" );
        })
        return false;
    }); 




$('#feed-form').on('submit', function(){

    var formData = $(this).serialize();

    $.ajax({
            url: this.action,
            type: this.method,
            data: formData,
            dataType: "json",
            context: this,
            beforeSend: function()
            {
                $(this).find('#send-stream').addClass('disabled');
                $('.feed-loader').show();
            },
            success: function(data) 
            {
                if (data.status == 'success') {

                    $(this).find('textarea').val('');

                    $('.countdown').text('250');
                    $('#feed-wrapper').prepend(data.body)

                }


            },
            complete: function()
            {
                $('.feed-loader').hide();
            }
        });

    return false;   
});

尝试委托，但没有不工作，在添加数据后我刷新页面工作，但在ajax提交后没有。

任何提示我愚蠢的提示？

Answer 1

试试这个：

$('#feed-wrapper').on('click', '.comment-post', function() {
    var post = $(this).data('id');
    $('#'+post).find('.ui.comments').toggle();
    return false;
});


$('#feed-wrapper').on('click', '.delete-post', function(){
    var post = $(this).data('id');
    $.post('posts/delete', { postId: post }, function(){
        $('#feed-wrapper #'+post+'').toggle( "highlight" );
    })
    return false;
});

Answer 2

你需要同步ajax by async：false

ajax post委托后jQuery附加数据

2 个答案: