绑定两个JQuery和Ajax函数

Question

我有下面的JQuery / AJAX代码：

 <script>


    $('.warning-dialog').click(function () {
        alert($(this).data("id"));
    });

    $(function () {
        //twitter bootstrap script
        $("button#delete").click(function () { 
            $.ajax({
                type: "GET",
                url: "deleteArticleType.php",
                data: { 'typeID': $('.warning-dialog').data("id") },
                success: function (msg) {
                    $("#thanks").html(msg)
                    $("#form-content").modal('hide');
                },
                error: function () {
                    alert("failure");
                }
            });
        });
    });
</script>

第一个函数获取button的data-id。 第二个函数调用PHP页面，使用GET方法应从第一个函数获取值。

我尝试了上面的代码，但是没有用。

我的问题是为什么以及如何解决？

Answer 1

如果这是两个单独的事件，时间上已断开连接，并且您要存储第一次单击的值，然后在第二次单击中使用它，则必须将其存储在某个位置。 有几种选择，最简单的是变量。

$(function () {
    var lastClickId;
    $('.warning-dialog').click(function () {
        lastClickId = $(this).data("id");
    });

    //twitter bootstrap script

    // FIXME: you need to add logic here for what to do if lastClickId isn't set yet
    // or create a default behavior in that case
    $("button#delete").click(function () { 
        $.ajax({
            type: "GET",
            url: "deleteArticleType.php",
            data: { 'typeID': lastClickId },
            success: function (msg) {
                $("#thanks").html(msg)
                $("#form-content").modal('hide');
            },
            error: function () {
                alert("failure");
            }
        });
    });
});

由于看起来您需要先单击才能进行第二次单击才能进行操作，因此您可能应该修改UI以使用不同类型的控件，或者如果用户没有这样做则需要添加一些错误处理不要按正确的顺序单击。

Answer 2

实际上，它应该使用$('.warning-dialog').data("id")

如果您的页面仅包含一个warning-dialog类，则可以使用该方法。 看来您正在将该类引用为许多元素。