【问题标题】:Do not switch tab on tab click event不要在选项卡单击事件上切换选项卡
【发布时间】:2017-09-29 18:29:26
【问题描述】:

每当用户单击选项卡时,我想调用一个函数,如果该函数返回 false,我想留在同一个选项卡上,否则移动到用户按下的选项卡。

我在选项卡开关上绑定了一个事件。

$(".selector").tabs();
$(".selector").bind("tabsactivate", function(event, ui) {
  alert('oldTab = ' + ui.oldTab.index());
  alert('newTab = ' + ui.newTab.index());
  if (some_condition)
    console.log("EQUAL");
  else {
    BootstrapDialog.confirm({
      title: 'WARNING',
      message: 'You have not saved the changes.Do you want to save it?.',
      type: BootstrapDialog.TYPE_WARNING,
      draggable: true,
      callback: function(result) {

        //if user presses ok, then i want to stay on the previous tab else move to the tab pressed 

        if (result) {
          //stay on the same tab

          $(".selector").tabs("option", "active", ui.oldTab.index());

        } else
        //moved to pressed tab
      }
    });
  }
}
});

但是当我这样做时,问题是,因为这个$( ".selector" ).tabs( "option", "active", index );,这个绑定事件被再次触发。并且这个确认对话框再次出现。我不希望再次执行此bind 事件,有没有其他方法可以留在较早的选项卡上 或如何避免这种情况?

【问题讨论】:

  • 最简单的方法是在$( ".selector" ).tabs( "option", "active" 语句之前设置一些布尔标志,并在$(".selector").bind("tabsactivate", function (event, ui) { 的第一行检查它。如果已设置,则从事件处理程序中将其设为 falsereturn
  • event.preventDefault() 可以帮到你

标签: javascript jquery jquery-ui tabs


【解决方案1】:
$('.selector').on('click',function(){
    if (flag == false) {
        $(this).removeClass('active in') ;                 
        return false;
    }
})

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-05-12
    • 2017-01-08
    • 2014-08-31
    • 1970-01-01
    • 2021-11-28
    • 2017-12-12
    • 2016-03-13
    • 2019-10-31
    相关资源
    最近更新 更多