2

我有一个页面，将在单击按钮时进行外部调用，然后更新按钮以反映成功。ajax 调用正常工作，但是当页面上有很多按钮时，我很难尝试操作按钮的文本。

当它是页面上唯一的项目时，它很容易匹配 $(".sabPauRes.ui-btn-text").text("Updated");，但我不确定在使用每个函数时如何使用 $(this) 指向它。我读了一些关于“最接近”的内容，但它似乎并没有完成我想要的（或者我只是做错了）。

下面的代码示例！

$(document).ready(function(){
    $('.sabPauRes').each(function() {
        $(this).click(function(event) {
            event.preventDefault();
            $.ajax({
                type: "GET",
                url: this.href,
                cache: false,
                dataType: "text",
                success: onSuccess
            })
        })

        $("#resultLog").ajaxError(function(event, request, settings, exception) {
            $("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
        })

        function onSuccess(data)
        {
            // validate the result of the ajax call, update text, change button methods as needed
            if (data == "Success") {
                // PROBLEM -- how do I use $this to match a class that is nested within it?
                $(this).closest(".ui-btn-text").text("Updated");
            } else {
                alert("Failed: " + data);
            }
            $("#resultLog").html("Result: " + data);

        }
    })
})

html

<body>
<div data-role="page">
    <div data-role="content">

    <div data-role="collapsible">
        <h3>This is an item</h3>
        <p>
                <a href="/api/?resume=fhdh54" class="sabPauRes" data-ajax="false" data-role="button" data-inline="true" data-request="resume">Resume Download</a>


            <div id="resultLog"></div>
        </p>
    </div>
</div>
</body>
4

2 回答 2

0

Found the answer within Change button text jquery mobile

If you assign $(this) to a variable, then you can reference it in the .text() function as shown below:

$(document).ready(function(){
$('.sabPauRes').each(function() {
    $this = $(this);
    $(this).click(function(event) {
        event.preventDefault();
        $.ajax({
            type: "GET",
            url: this.href,
            cache: false,
            dataType: "text",
            success: onSuccess
        })
    })

    $("#resultLog").ajaxError(function(event, request, settings, exception) {
        $("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
    })

    function onSuccess(data)
    {
        // validate the result of the ajax call, update text, change button methods as needed
        if (data == "Success") {
            alert(data);
            $(".ui-btn-text",$this).text("Updated");
        } else {
            alert("Failed: " + data);
        }
        $("#resultLog").html("Result: " + data);

    }
})

})

于 2013-02-10T20:50:53.633 回答
0

第一件事。使用 jQuery Mobile 时请停止使用 jQuery 就绪处理程序。给你的页面一个id并使用pageinit()事件。

pageinit = DOM 就绪

人们在 jQuery 中学习的第一件事就是使用 $(document).ready() 函数在 DOM 准备好后立即执行特定于 DOM 的代码（这通常发生在 onload 事件之前很久）。然而，在 jQuery Mobile 站点和应用程序中，页面被请求并注入到与用户导航相同的 DOM 中，因此 DOM 就绪事件没有那么有用，因为它只针对第一页执行。要在 jQuery Mobile 中加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。

您可以将 ref 保存到单击的按钮并在处理程序中使用它，success如下error所示：

$(document).on("pageinit", "#page1", function(){
    $(document).on("click", "a.sabPauRes", function(event){
        event.preventDefault();
        //Save a ref to the clicked button
        $this = $(this);
        $.ajax({
            type: "GET",
            url: this.href,
            cache: false,
            dataType: "text",
            success: function (data){
                // validate the result of the ajax call, update text, change button methods as needed
                if (data == "Success") {
                    $this.find(".ui-btn-text").text("Updated");
                } else {
                    $this.find(".ui-btn-text").text("Failed");
                }
                $("#resultLog").html("Result: " + data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $this.find(".ui-btn-text").text("Error");
                $("#resultLog").html("Error Calling: " + $this.attr("href") + "<br />HTTP Code: " + jqXHR.status + " " + jqXHR.statusText);
            }
        })

    });
});

这是jsFiddle

于 2013-02-10T20:58:24.370 回答