javascript - bootstrap3 - hide.bs.dropdown 函数无论 .click 定义如何都会触发？ ..用 fiddle

Question

设置一个 .click 事件，在下拉菜单关闭时调用 setRead() 函数，从而触发 ajax 调用。

现在，由于某种原因，无论 .click 定义如何，都会调用 setRead() 函数。 http://jsfiddle.net/N2v9S/6/

setRead() 只能在单击 .markRead 时调用，而不是 .markedRead

这是 HTML(它涉及 Handlebars 模板，其中每个 btn 的值是不同的 id):

<div class="thisness">
    <div class="exterior">
      <input type="hidden" name="storyID" id="storyID" class="storyID" value="id1" />
    <div class="interior">
      <div class="btn-group dropdown markRead">
            <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="glyphicon glyphicon-unchecked"></span>
            </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </div><!--/.btn-group(dropdown)-->
    </div></div><!--/.interior/.exterior-->
    ...
</div><!--/.thisness-->

这是 Javascript/jQuery:

function setRead(id, markedRead, datetimeRead) {

  var AjaxReadData = {
      id : id,
      markedRead : markedRead,
      datetimeRead : datetimeRead
  };

  // make an ajax call
  alert('ajax of ' + id + ' markedRead: ' + markedRead + ' at ' + datetimeRead);

  console.log(AjaxReadData.id + " message marked read: " + AjaxReadData.markedRead);

}

$(document).ready(function(){

    $(".thisness").on("click", ".markRead", function () {

        var datetimeRead = new Date(); // setting the datetime when read

        console.log('markRead clicked');

        var $this = $(this),
            $that = $(this).closest('.exterior').find('.glyphicon-unchecked');

        markedRead = true;

        $that.removeClass('glyphicon-unchecked').addClass('glyphicon-check');
        console.log('now checked icon');

        $this.removeClass('markRead').addClass('markedRead');
        console.log('now markedRead class');

        var id = $(this).closest('.exterior').find( ".storyID" ).val();
        console.log(id);

        console.log('ready for ajax of ' + id + ' markedRead: ' + markedRead + ' at ' + datetimeRead);

        // when .markRead (now .markedRead) dropdown closes      
        $(".thisness").on("hide.bs.dropdown", $this , function () {
          console.log('ajax of ' + id + ' markedRead: ' + markedRead + ' at ' + datetimeRead);
          setRead(id, markedRead, datetimeRead);
        })

    });

}); // doc is ready

还测试了 .when 和 .then jQuery Promise，但这实际上在隐藏下拉菜单之前运行？

$.when( $(".thisness").on("hide.bs.dropdown", $this) ).then(function () {
  console.log('ajax of ' + id + ' markedRead: ' + markedRead + ' at ' + datetimeRead);
    setRead(id, markedRead, datetimeRead);
})

Answer 1

问题是您正在附加一个事件处理程序。所以，它并不是在 if 语句之外消失，而是被附加了。进行测试，手动设置其中一个字形来检查并运行页面。您会发现，即使单击选中的图标并从其下拉列表中进行选择，setRead() 也不会运行。

使用one()函数而不是 on()。

$(".thisness").one("hide.bs.dropdown", $this , function () {
    console.log('ajax of ' + id + ' markedRead: ' + markedRead + ' at ' + datetimeRead);
    setRead(id, markedRead, datetimeRead);
})