Question

我使用了带引导模式的jquery.dirtyforms来通知用户此页面中没有保存某些内容。这与锚链接完美配合，但我在页面上有一个div，它实际上是作为其他页面的链接。此div的{{1}}属性包含其他网页的网址，点击后我将data-action值设置为data-action进行导航。当我单击window.location.href时，它会在默认弹出窗口中显示确认消息，而不是Bootstrap Modal。我给名为div的div提供了一个唯一的类。我试图在jquery.dirtyforms.js中添加对div的支持并写下这个不起作用：

tabDiv

<div class="sf-active div_Header tabDiv" id="div_Header" data-action="@Url.Action("ViewContract", "Contract", new { Id = Request.QueryString["Id"] })">
    <span>First</span>
    <i class="i_Header"></i>
    ClickMe
    <div class="ContraHeader glyphicon"></div>
</div>

我试图在Jquery.DirtyForms.Js中改变哪些不起作用

$(".div_Header").click(function(evt) {  
    evt.stopImmediatePropagation();
    var url = $(this).attr('data-action');
    if (url !== undefined)
        window.location.href = url;
});

我希望它也适用于var events = { bind: function (window, document, data) { $(window).bind('beforeunload', data, events.onBeforeUnload); $(document) .on('click', 'a:not([target="_blank"])', data, events.onAnchorClick) .on('submit', 'form', data, events.onSubmit) .on('click', 'div.tabDiv', data, events.onDivCLick); }, onDivCLick: function(ev){ bindFn(ev); },点击。目前它正在工作，但消息是浏览器的默认弹出窗口。我想在这个点击上显示相同的Bootstrap Modal。

Answer 1

将window.location.href与Dirty Forms一起使用有点棘手。幸运的是，在这种情况下你可以customize the event binding来控制。

请记住，导航需要在两种不同的情况下发生：

当表格不脏时。
当用户点击＆＃34时，继续＆＃34;在对话框上。

因此，最好在这两种情况下使用通用函数。如果只有一个事件处理程序可以确保没有事件排序问题，那么它也会运行得最好。

对于第一种情况，您只需要插入代码以检查事件中的脏状态。您可以在bind.dirtyforms事件内创建活动以获取对events对象实例的访问权限，然后只需在适当的时间内调用活动内的events.onAnchorClick(ev)。

如果表单脏了，Dirty Forms将取消该事件。因此，您需要检查ev.isDefaultPrevented()是否返回false。如果是这样，可以安全地启动导航。

对于第二种情况，您可以利用Dirty Forms挂起到事件对象的事实，直到对话框关闭。如果您将URL存储在ev.data属性中，则可以稍后在此过程中访问该URL。具体来说，Dirty Forms在用户单击＆＃34;继续＆＃34;时（并且仅在何时）调用onRefireClick事件处理程序。因此，您可以使用之前存储在活动中的网址在那里启动自定义导航。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        input.dirty, input.dirty + label, select.dirty, textarea.dirty {
            background-color: red;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdn.jsdelivr.net/g/jquery@1.11.3,bootstrap@3.0.0,jquery.dirtyforms@2.0.0(jquery.dirtyforms.min.js+jquery.dirtyforms.dialogs.bootstrap.min.js)"></script>
</head>
<body>
    <form action="/" id="dialog-form-thing" method="post"> 
        <input id="text1" type="text"/>

        <div class="sf-active div_Header tabDiv" id="div_Header" data-action="http://www.google.com/">
            <span>First</span>
            <i class="i_Header"></i>
            ClickMe
            <div class="ContraHeader glyphicon"></div>
        </div>
    </form>

    <script>
        $(function() {
            function navigate(url) {
                if (url !== undefined)
                    window.location.href = url;
            }

            /*   Event binding code - call before first .dirtyForms  */
            $(document).bind('bind.dirtyforms', function (ev, events) {
                var originalBind = events.bind;

                events.bind = function (window, document, data) {
                    // Attach the original Dirty Forms events
                    originalBind(ev);

                    // Attach a custom event
                    $(document).on('click', 'div.tabDiv', data, function (ev) {
                        // Store the URL in the event object for later use
                        var navUrl = $(this).attr('data-action');
                        ev.data = { url: navUrl };

                        // Execute the Dirty Forms logic to open the 
                        // dialog if the page has dirty form(s).
                        events.onAnchorClick(ev);

                        // If the page has no dirty forms, this
                        // will return false, causing navigation.
                        if (!ev.isDefaultPrevented())
                        {
                            navigate(navUrl);
                        }
                    });
                };

                var originalOnRefireClick = events.onRefireClick;

                events.onRefireClick = function (ev) {
                    if (ev.data && ev.data.url)
                    {
                        // If we previously stored the URL, navigate to it.
                        navigate(ev.data.url);
                    }
                    else
                    {
                        originalOnRefireClick(ev);
                    }
                };
            });

            $('form').dirtyForms();

        });
    </script>
</body>

Jquery dirtyforms在DIV click和window.location.href上无法正常工作

1 个答案: