yii2 按钮点击事件先于数据确认消息

Question

我在数据网格中使用了带有 Html::a 标签的数据确认属性并且它有效。但现在我想将它与这样的按钮一起使用：

    <?php echo Html::button("<span class='icon delete'></span>", [
        "class" => "delete",
        "title" => Yii::t("app-upload-list", "delete"),
        "data-confirm" => Yii::t("yii", "Are you sure you want to delete this item?"),
    ])

我在这里不使用锚点，因为这个按钮在服务器端没有任何作用。但是当我将点击事件附加到按钮时，它位于确认框之前。我可以通过在点击事件中自己编写确认代码并使用 data-my-confirm （或左右）属性来防止双重确认框来绕过它，但它不是很好。我可以用数据确认来做到这一点吗？

Answer 1

我认为您可以在视图的 Yii2 模板中找到类似的示例。

在我看来，我有以下代码：

 <?= Html::a('Delete', ['delete'], [
            'class' => 'btn btn-danger',
            'data' => [
                'confirm' => 'Are you sure you want to delete this item?',
                'method' => 'post',
            ],
        ]) ?>

我不得不承认我还没有尝试将它与 Html::button 一起使用。但是你可以尝试这样的事情：

 <?php echo Html::button("<span class='icon delete'></span>", [
        "class" => "delete",
        "title" => Yii::t("app-upload-list", "delete"),
        "data" => [
                    'confirm' => 'Are you sure you want to delete this item?',
                    'method' => 'post',
                ],
    ]) ?>

编辑：是的，这种方式不行。

建议使用 link (Html::a) 并根据需要设置样式。如果您想提交表格，您应该使用：Html::submitButton()

如果你想使用一个按钮......你可以让它与 jQuery 一起工作，正如 Stu 在此处提到的那样：

Answer 2

我遇到了同样的问题。这是 Yii 的监听器（yii.js，第 486 行）：

// handle data-confirm and data-method for clickable and changeable elements
$(document).on('click.yii', pub.clickableSelector, handler)
    .on('change.yii', pub.changeableSelector, handler);

它使用Event Delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

在这种情况下，侦听器附加到文档节点，该节点正在侦听从被单击元素冒出的点击。放置在可点击元素本身或任何文档节点子元素上的监听器将在文档节点上的监听器之前触发，即在 Yii 的监听器之前。

为了确保 Yii 的侦听器在您的侦听器之前触发，您必须像 Yii 那样将您的侦听器附加到文档节点；同一节点上的侦听器按注册顺序调用。

$(document).on('click', '.delete', yourHandlerFunction);

注意：当您需要一个监听器来监听添加监听器时不一定存在的元素，或者监听单个节点而不是多个节点。通常建议使用在添加侦听器时存在并且在需要时继续存在的最近的父元素。我不建议在没有充分理由的情况下将侦听器放在文档节点上。

Answer 3

即使这是一个老问题，我也愿意贡献我所知道的。

如果您想使用 html::button() 而不是 html::a()

这是一个例子

 <?php echo Html::button("<span class='icon delete'></span>", [
    "class" => "delete",
    "title" => Yii::t("app-upload-list", "delete"),
    "onclick" => 'if(confirm("Are you sure you want to delete this item?")){
                     return true;
                    }else{
                     return false;
                    }',
]) ?>

我确定它应该有效。

yii2 按钮点击事件先于数据确认消息

yii2 button click event precedes data-confirm message

button

yii2

click

confirm