将触发的元素传递给 bootbox 回调 jquery答案

【问题标题】：Pass the triggered element to the bootbox callback jquery将触发的元素传递给 bootbox 回调 jquery
【发布时间】：2015-05-05 23:35:27
【问题描述】：

我想将“a.delete”触发元素传递给我的引导箱回调，有没有办法做到这一点？

var confirm = false;
$('body').on('click', 'a.delete', function(e) {
    if( confirm == false){ e.preventDefault(); }
    bootbox.confirm("Confirm?", function(result) {
        if(result == true){
            confirm = true;
            $(this).trigger('click');
        }
    });
});

编辑好吧，Taplar 我按照你说的做了，但没有触发动作，即使“触发点击”正在工作......

var confirm = false;
$('body').on('click', 'a.delete', function(e) {
    var element = $(this);
    if( confirm == false){
        e.preventDefault();
        bootbox.confirm("Confirm?", function(result) {
            if(result == true){
                confirm = true;
                console.log(confirm);
                element.trigger('click');
            }
        });
    } else {
        console.log('triggered again');
    }
});

退出：点击确认按钮后得到的结果

true

triggered again

我的解决方案

var confirm = false;
$('body').on('click', 'a.delete', function(e) {
    var element = $(this);
    if( confirm == false){
        e.preventDefault();
        bootbox.confirm("Confirm?", function(result) {
            if(result == true){
                confirm = true;
                $(element)[0].click();
            }
        });
    } else {confirm = false;}
});

【问题讨论】：

我能问一下你想在这里完成什么吗？您似乎正在使用超链接作为删除按钮，并确认请求应该继续？
是的，如果 bootbox 被确认然后继续它的自然行为，就是这样......我问是因为 bootbox 似乎没有传递参数的选项......无论如何我解决了它（我认为是正确的）：D

标签： jquery callback element bootbox

【解决方案1】：

在调用 bootbox.confirm 之前，将“this”存储在变量中。

var clickedElement = this;

然后在 bootbox.confirm 中你可以引用“clickedElement”。

【讨论】：

我想我得问一下，你期望 element.trigger('click') 做什么。根据您的逻辑，该结果是预期的。
我希望 'element.trigger('click')' 执行 'a' 标签的初始 href 操作...而不是再次询问确认（如果您对 bootbox 说是的话确认）。
不是这样吗？从您的 OP 中，它只会在之前得到确认的情况下执行 else。当您的控制台从 else 中写出文本时，它遵循该逻辑。而且由于您只是在阻止该事件并在前面的 if 中要求确认，因此第二个事件应该继续正常进行。
不，没有继续执行该操作，这就是为什么我在登录时对其进行“其他”测试的原因，因为它什么也没做。
在这种情况下不确定。那时我的假设是其他东西正在阻止该行动。如果没有一个可行的例子，我觉得我不能提供更多的建议。

【解决方案2】：

虽然您所拥有的可能“有效”，但您确实不想使用超链接进行删除操作。通过这样做，您正在使用 GET 请求来触发服务器端的更改（并且是破坏性的），这应该是a bit of a no-no：

特别是，已经确立了 GET 和 HEAD 方法不应该具有采取行动的意义除了检索。这些方法应该被认为是“安全的”。这允许用户代理表示其他方法，例如 POST、PUT 和删除，以一种特殊的方式，让用户知道正在请求可能不安全的操作。

更好的解决方案是将您的超链接替换为实际按钮的单个表单，如下所示：

<form method="post" action="your/deleteaction" class="delete-item">
    <input name="ID" value="1" />
    <button type="submit" class="btn btn-danger">Delete</button>
</form>

然后你可以这样做：

$(document).on('submit', 'form.delete-item', function(e) {
    bootbox.confirm("Really delete this item?", function(result) {
        if(result !== true){
            e.preventDefault(); 
        }
    });
});

通过这种方式，您遵循了最佳实践，并且您将引导框确认用作转义子句，而不必重新触发链接。

【讨论】：