Jquerydirtyforms 在 DIV click 和 window.location.href 上无法正常工作
Posted
技术标签:
【中文标题】Jquerydirtyforms 在 DIV click 和 window.location.href 上无法正常工作【英文标题】：Jquery dirtyforms not working properly on DIV click and window.location.href 【发布时间】：2016-10-03 07:38:44 【问题描述】：我使用带有引导模式的 jquery.dirtyforms 来通知用户此页面中未保存某些内容。这与锚链接完美配合，但我在页面上有一个div，它实际上是作为指向其他页面的链接。这个div 具有包含另一个页面的URL 的data-action 属性，单击时我将data-action 值设置为window.location.href 以进行导航。当我单击div 时，它会在浏览器的默认弹出窗口而不是 Bootstrap Modal 上给出确认消息。我为名为@987654327@ 的div 提供了一个独特的类。我试图在 jquery.dirtyforms.js 中添加对 div 的支持并编写了这个不起作用：
<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>
$(".div_Header").click(function(evt)
evt.stopImmediatePropagation();
var url = $(this).attr('data-action');
if (url !== undefined)
window.location.href = url;
);
我尝试在 Jquery.DirtyForms.Js 中更改的内容不起作用
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);
,
我希望它也可以在 div 上运行。目前它正在工作，但浏览器默认弹出窗口中的消息。我也想在这次点击中显示相同的引导模式。
【问题讨论】：
【参考方案1】：将window.location.href 与脏表单一起使用有点棘手。幸运的是，您可以customize the event binding 控制这种情况。
请记住，导航需要在两种不同的情况下发生：
-
当表格不脏时。
当用户点击对话框上的“继续”时。
因此，最好在这两种情况下使用一个通用函数。如果只有 1 个事件处理程序以确保没有事件排序问题，则效果最好。
对于第一种情况，您只需在事件中插入代码来检查脏状态。您可以在 bind.dirtyforms 事件内创建您的事件以访问 events 对象实例，然后在适当的时间在您的事件内调用 events.onAnchorClick(ev)。
如果表单脏了，脏表单将取消该事件。因此，您需要检查ev.isDefaultPrevented() 是否返回false。如果是这样，触发导航是安全的。
对于第二种情况，您可以利用 Dirty Forms 挂在事件对象上直到对话框关闭这一事实。如果您将 URL 存储在 ev.data 属性中，您可以稍后在此过程中访问它。具体来说，当（且仅当）用户单击“继续”时，Dirty Forms 会调用onRefireClick 事件处理程序。因此，您可以使用之前存储在事件中的 URL 在此处触发自定义导航。
<!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>
【讨论】：
以上是关于Jquerydirtyforms 在 DIV click 和 window.location.href 上无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章