Bootstrap 3选项卡导航和输入值的“未保存的更改”

Question

我已经实现了一些JavaScript，当用户尝试从我的页面之一导航而不保存数据时会通知用户。但是它不适用于引导程序的3个选项卡。用于标签导航的javascript如下：

        $(document).ready(function() {
            $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
              var url = $(this).attr("href"); // the remote url for content
              var target = $(this).data("target"); // the target pane
              var tab = $(this); // this tab

              // ajax load from data-url
              $(target).load(url,function(result){      
                tab.tab('show');
              });
            });

            // initially activate the first tab..
            $('#tab1').tab('show');
        });

负责“未保存的警报”的Javascript是：

$(document).ready(function () {
 var unsaved = false;

$(":input").change(function(){ //trigers change in all input fields including text type
    unsaved = true;
});

function unloadPage(){ 
    if(unsaved){
        return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
    }
}

window.onbeforeunload = unloadPage;
});

任何人都可以建议我如何使选项卡“未保存”吗？我试图在onload选项卡中声明“如果未保存== false”警报用户，但这对我不起作用。