yii2 按钮点击事件在数据确认消息之前

Question

我在 datagrids 中使用了带有 Html::a 标记的 data-confirm 属性，它起作用了。但现在我想用这样的按钮来使用它：

    <?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?"),
    ])

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

Answer 1

我遇到了同样的问题。这是 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

事件委托允许我们将单个事件侦听器附加到 父元素，它将为匹配的所有后代触发 选择器，这些后代是现在存在还是被添加到 未来。

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

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

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

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

Answer 2

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

如果您想使用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;
                    }',
]) ?>

我相信它应该可以工作。

Answer 3

我认为您可以在视图的 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',
                ],
    ]) ?>

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

建议使用链接 (Html::a) 并根据需要设置样式。 如果你想提交一个表单，你应该使用： Html::submitButton()

如果你想使用一个按钮......你可以让它与 Stu 提到的 jQuery 一起工作：https://stackoverflow.com/a/12697511/2437857