ajax请求的Yii2 jquery冒泡处理

Question

第一:我不知道我的头衔是否结构良好，我不想为此道歉！我有一个模式形式，以显示从所有用户发送的消息。当我单击message时，它应该以相同的形式通过ajax请求打开它！问题是，当我单击某个消息时，似乎出现了冒泡现象。在刷新页面并再次单击之后，有时它会冒泡到最后一条消息，有时不会。不知道那是什么行为。会告诉你一些建议，因为我几乎一天都在挣扎。我只想打开所选的信息。我尝试过whit event.stopImmediatePropagation()，但它每次都会打开第一条消息。

我的模态代码：

<?php
                    Modal::begin([
                            'header' => '<h2><em>Messages</em></h2>',
                            'headerOptions' => [
                                    'class' => 'text-center',
                                ],
                            'id' => 'modal',
                            'size' => 'modal-md',
                    ]);

                    echo "<div id='userMessages' style='border: 1px solid black'>";
                        if(\app\controllers\UserController::getMessages())
                        {
                            $messages = \app\controllers\UserController::getMessages();

                            echo "<table class='table table-responsive'>
                                  <thead class='text-center thead-style'>
                                        <td>Title</td>
                                        <td>Author</td>
                                        <td>View</td>
                                  </thead>";

                            foreach ($messages as $message)
                            {
                                echo "<tr>

                                        <td class='text-center'>". $message['message_title'] ."</td>
                                        <td class='text-center'>". $message['message_author'] ."</td>
                                        <td class='text-center'>" . Html::a('<span class=\'glyphicon glyphicon-eye-open\'></span>',
                                                                                            ['#'],
                                                                                            ['class' => 'view-message']);
                                                                    $this->registerJs("$('.view-message').on('click', function(event){

                                                                        event.preventDefault();

                                                                        $.ajax({
                                                                            url : '". \yii\helpers\Url::to(["message", "id" => $message['message_id']]) ."',
                                                                            cache : false,
                                                                            success : function( data ){
                                                                                $('#userMessages').html( data );
                                                                            }       
                                                                        });
                                                                    })")
                                        . "</td>
                                      </tr>";
                            }

                            echo "</table>";
                        }
                    echo "</div>";

                    Modal::end();
                ?>

我的actionMessage：

public function actionMessage($id)
    {
        $currMessage = UsersMessages::find()->where(['message_id' => $id])->one();

        return $this->renderAjax('message',[
            'msg' => $currMessage
        ]);
    }

Answer 1

当前正在添加多个单击事件，因此只触发第一个单击事件，因此只需要一个单击事件，就可以从循环中删除js，并向按钮中添加一个带有消息id的数据属性，然后在javascript中添加该id并构建您的url。

foreach ($messages as $message)
{
    echo "<tr>

            <td class='text-center'>". $message['message_title'] ."</td>
            <td class='text-center'>". $message['message_author'] ."</td>
            <td class='text-center'>" . Html::a('<span class=\'glyphicon glyphicon-eye-open\'></span>',
                                                                ['#'],
                                                                ['class' => 'view-message','data-id'=> $message['message_id']]);

            . "</td>
          </tr>";
}
$this->registerJs("$('.view-message').on('click', function(event){
    event.preventDefault();
    var id = $(this).attr('data-id');
    $.ajax({
        url : '". \yii\helpers\Url::to(["message"]) ."?id='+id,
        cache : false,
        success : function( data ){
            $('#userMessages').html( data );
        }       
    });
})")