Question

参考以下链接http://jsfiddle.net/Xtreu/，我尝试使用任何表单在点击事件“删除我的数据”按钮上执行相同的功能。我尝试过不同的方式，但事情并没有发生。可以任何人帮助我如何使用点击事件做同样的例子吗？

HTML：

<form method="post" action="/echo/html/">
    <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <input type="submit" value="Delete My Data" />
</form>
<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

Java脚本：

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

$(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {
            form.submit();
        }, function no() {
            // do nothing
        });
    });
});

Answer 1

试试这个

你的HTML

<form method="post" action="/echo/html/" id="frm">
    <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <input type="button" id='btnSubmit'value="Delete My Data" />
</form>
<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

你的js代码：

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

$(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {

            $('#frm').submit(); //Changed
        }, function no() {
            // do nothing
        });
    });
});

在您的代码中，按钮类型已提交，因此我将其更改为普通按钮，我将ID提供给您的表单并提交按钮。

Answer 2

这里的代码没有使用form

试试这个例子

<div id="msg" style="display:none">Your data has been deleted</div>
<input type="button" id="d_btn" value="Delete My Data" />
<div id="confirmBox">
    <div class="message"></div> <span class="button yes">Yes</span>
 <span class="button no">No</span>

</div>

脚本

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function () {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

$(function () {
    $("#d_btn").click(function (e) {
        e.preventDefault();
        var form = $(this).closest('form');
        doConfirm("Are you sure?", function yes() {
            $('#d_btn').hide()
            $('#msg').show()
        }, function no() {
            // do nothing
        });
    });
});

DEMO

无法执行on click事件

2 个答案: