绑定两个JQuery和Ajax函数

Question

I have the follwoing JQuery/AJAX code:

 <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>

The first function gets the data-id of a button . The second function calls a PHP page and with the method GET should get the value from the first function.

I tried the code above but it didn't work.

My question is why and how can I fix it?

Answer 1

If these are two separate events, disconnected in time and you want to store the value from the first click and then use it in the second click, then you will have to store it somewhere. There are several options, the simplest being a variable.

$(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");
            }
        });
    });
});

Since it looks like you are requiring the first click to happen before the second click can have something to operate on, then you should probably either modify the UI to use different types of controls or you will need to add some error handling if the user doesn't click in the right order.

Answer 2

Actually it should have worked using $('.warning-dialog').data("id")

If your page contains only a single class warning-dialog , you approach will be worked. It seems you're referring this class to many elements.