Javascript 警告在另一个选项卡内的选项卡内未保存的更改

这是我的代码：

var tableSTART=$(".tbody").html();
$( ".selector" ).tabs({activate: function(event, ui) {
  var current=$(".tbody").html();
  if (current!= tableSTART) {
       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(result) {
                    //var index = $('.selector a[href="'+"#"+tableCRAWLTYPE+'"]').parent().index();
                    var index = $('#tabs a[href="#your-tab"]').parent().index();
                    $( ".selector" ).tabs( "option", "active", index );
                    var tab = $( ".innerTab ul>li a:contains("+extractType+")" );
                      if(tab[0]) {
                        var tabid = tab[0].id;
                        var tabIndex = tabid.substr(tabid.length - 1);
                        $('.innerTab').tabs('option', 'active' , tabIndex-1);
                      }
                    //}
                    tableSTART=current;
                }
            }
        }); 
   //end dialog
        }
        else
        {   
            alert("not changed");

        }
    }
});

我想要的是，当我在另一个选项卡内的选项卡内的表中进行一些更改，并尝试在不保存的情况下移动到另一个选项卡时，会出现一条警告消息：“是否要保存”。如果用户单击“确定”，则应保持在同一页面上，如果单击“否”，则应允许切换到其他选项卡

当我运行上述操作时，当我在其他选项卡的内部选项卡中进行一些更改时，会出现警告消息，如果我单击“是”，则会再次出现弹出窗口（我认为，因为当我将活动选项卡设置为我单击的选项卡时，

.tabs（）

会再次调用）

如何正确地执行此操作，以及如何以更好的方式执行此操作

PS：我正在比较更改前后的

.tbody

html内容

tableSTART

是页面加载时的初始内容，然后我动态添加一些div（这些div中的文本字段等）。

---

和

current

检查innertab的

.tbody

中的当前html切换选项卡时，原始选项卡不保留用户输入的内容吗？为什么要问用户是否要保留他们输入的内容，而浏览器仍将保留这些内容。@Chad Hedgcock..实际上在我的页面中，首先我从下拉列表中选择一个值，并根据该值在innertab中显示数据..因此它基本上在同一页面上。这一切都是动态的（javascript和jquery）浏览器将如何保留这个，我不明白你的意思。如果我从当前选项卡移动到其他选项卡而不保存当前选项卡的更改，我基本上希望收到一条警告消息。如果用户在一个选项卡中输入数据，然后转到下一个选项卡，然后他们返回到选项卡1，他们的数据是否已丢失？否，未丢失。就在那里