Question

我找到了一个在后台运行查询时如何向按钮添加微调器的示例。

$(function(){

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>",
    spinnerObjects = $(".has-spinner");

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;")
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML)
spinnerObjects.click(function() {
    $(this).toggleClass('active');
});
});

我撕掉了添加和添加的部分，因为它们不是我所需要的，并重写了它，使其看起来像这样。

function toggleSpinner(active) {
alert('here!');
spinnerObjects = $(".has-spinner");
spinnerObjects.each(function () {
    if (active) {
        alert('Got here!');
        $(this).add(' active');
    }
    else {
        alert('Also got here!');
        $(this).remove('active');
    }
});
}

我是从刷新查询中调用它的。

function refreshView(url, divName) {
//alert('Got here!');
toggleSpinner(true);
$.ajax({
    type: 'POST',
    url: url,
    success: function (response) {
        if (response.success) {
            //console.log(response.html);
            $(divName).html(response.html);
            // Hide the "busy" gif:
            toggleSpinner(false);
            $.notify(response.message, "success");
        }
        else {
            // Hide the "busy" gif:
            toggleSpinner(false);
            $.notify(response.message, "error");
        }
    },
    error: function (jqxhr, status, exception) {
        alert('jQueryAjaxPost - Exception:', exception);
    }
});
}

这是HTML按钮代码：

    <button class="btn btn-primary has-spinner btn-primary" type="button" onclick="refreshView('@Url.Action("ViewEmployeePayItemDetail", "Employee", new { params omitted })', '#Detail_@Model.EmpId')">
         <span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>
            @Model.EmpNo
    </button>

以及相关的CSS：

.spinner {
    display: inline-block;
    opacity: 0;
    max-width: 0;
    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we 
    animate additional hidden width */
}

.has-spinner.active {
    cursor: progress;
}

.has-spinner.active .spinner {
    opacity: 1;
    max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

我到达了toggleSpinner代码，并且警报按预期方式启动/启动（每次运行一次每个按钮一次），但微调器并未像应有的那样激活。

我强烈怀疑

jQuery不会更新按钮上的微调器

0 个答案: