綁定兩個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類，則可以使用該方法。 看來您正在將該類引用為許多元素。