.hasClass.在第二次. Click之前不注册函数调用.ajax异步

.hasClass on.click not registering for a function call until a second .click..ajax async?

本文关键字：注册 函数调用 ajax 异步 第二次 Click hasClass      更新时间：2023-09-26

一些复选框按钮(使用bootstrap)触发ajax get调用。单击，选中按钮的活跃度提供了一种过滤机制。

现在，为什么过滤只在。单击第二个单击事件(如果单击btn1，则ajax运行，带有/.one.two.three…只有当btn2随后被点击时，它才注册为/.two.three…只有当btn3随后被点击，它注册为/. 3…?http://jsfiddle.net/ENJH9/2/

或者，如果在refreshData()调用之前删除类on。单击，数据被正确地提供，但是视图没有反映removeClass!?http://jsfiddle.net/ENJH9/3/

所有按钮都以一个活动类(http://getbootstrap.com/javascript/#buttons):

)开始
<div class="btn-group" data-toggle="buttons" id="theBtns">
  <label class="btn btn1 active">
    <input type="checkbox">one
  </label>
  <label class="btn btn2 active">
    <input type="checkbox">two
  </label>
  <label class="btn btn3 active">
    <input type="checkbox">three
  </label>
  <label class="btn btn4 active">
    <input type="checkbox">four
  </label>
</div>

下面是每个按钮的。click事件之后的。get调用:

function refreshData() {
    console.log('started refreshData()')
    URL = '';
    var filtering = function() {
        if($(".btn1").hasClass("active")) { URL += ".one"; }
        if($(".btn2").hasClass("active")) { URL += ".two"; }
        ...
    console.log('done filtering: ' + URL);
        return URL;
    };
    $.when( filtering() ).done(function() {
    console.log('now data refresh with %s filtering', URL)
    $.ajax({
      url:"http://localhost:4200/api/v1/data" + URL,
      method:'get',
      success: foundAllSuccess,
      error: foundError
    })
    });
}

下面是带有removeClass注释的click事件(按钮仍然保持视觉活动，类仍然保持在检查器中，但服务器通过这种设置准确地过滤):

$( ".btn1" ).click(function() {
  // if($(".btn1").hasClass("active")) {$(".btn1").removeClass("active"); console.log('hide btn1 data');}
  // else {$(".btn1").addClass("active"); console.log('btn1 data active');}
  refreshData();
}); // .btn1.click

首先，出现问题的主要原因是bootstrap和jQuery不能很好地结合在一起——至少在本例中不是这样。jQuery的click事件分派得如此之早，它发生在bootstrap切换为"active"之前。因此，refreshData()在点击之前的按钮状态下工作，而不是在点击之后。这可以用timeout()来克服，延迟refreshData()的执行，直到bootstrap完成它的事情。

其次，您不需要切换active，因为bootstrap会照顾这方面。

第三，通过更好地利用jQuery可以更有效地编写代码。

function refreshData(e) {
    var URL = $(e.target).closest(".btn-group").find("label").map(function (i) {
        if ($(this).hasClass("active")) {
            return ['.one', '.two', '.three', '.four'][i];
        } else {
            return null;
        }
    }).get().join(''); //.map() returns an array, .join() concatenates the strings in the array into a single string.
    alert('now ajax call with filtering :' + URL);
}
$("#theBtns .btn").on('click', function (e) {
    setTimeout(function () {
        refreshData(e);
    }, 0);
});

注意，对于我们的目的来说，即使延迟为零也足够了，因为从setTimeout执行的代码将在当前线程运行完成后尽早在单独的事件线程中运行。

可能有一种更"引导"的方式来达到同样的目的，但我不打算通过大量的引导文档来寻找。

相关文章：