我有一个超链接,点击后会呈现一个弹出窗体。 但是在弹出窗口渲染之前我想先验证一些数据。 因此,在这种情况下,如果客户端名称已存在,请不要呈现弹出窗口以创建具有该名称的新客户端。 所以在我的网页上我有;
<span id="buttonCreate" style="display: none;" class="bootstrapLink"
data-itoc-check-name="@Url.Action("CheckClientName", "DataService")">Click "Create" if you want to use this name
<a href="#edit-client-popup" class="btn btn-info btn-xs create-client" data-toggle="modal">Create</a>
</span>
在我的javascript中我有以下代码;
var popupUrl;
$('.create-client').click(function (event) {
event.preventDefault();
popupUrl = $(this).attr("href");
var button = $('#buttonCreate');
var clientName = getValue('clientName');
var url = button.data('itoc-check-name');
dataService.checkClientName(clientName, validateClientName, url);
});
var validateClientName = function (isInvalid) {
if (isInvalid) {
$("#errorMessageClientName").show();
return false;
}
resetModalPopup();
$("#editClientName").val(clientName);
document.location.href = popupUrl;
return true;
}
我希望event.preventDefault();会阻止弹出窗口渲染。如果验证通过,则document.location.href = popupUrl; 将呈现弹出窗口,否则如果验证失败则出现错误消息 - $(“#errorMessageClientName”)。show(); - 而是显示。 但是event.preventDefault();不起作用,弹出窗口呈现。 应该注意,validateClientName是一个回调函数,这可能是问题的一部分。在全局变量中设置事件并在回调函数中尝试event.stopPropagation()不起作用。 超链接中的data-toggle =“modal”属性是一个引导功能,在单击超链接时呈现模式弹出窗口。
那么我该如何解决这个问题呢?
答案 0 :(得分:1)
如果这是一个弹出式方案,并且用户没有理由想要右键单击该链接以打开新标签页,则完全删除<a>
标记。相反,
<span>
然后你不必阻止任何事情。另一个建议是包括event.stopPropagation()
以及event.preventDefault()
答案 1 :(得分:0)
这个答案不是100%理想,但我很满意。 不要试图阻止弹出事件发生,而是关闭表单。 所以回调函数看起来像这样;
var validateClientName = function (isInvalid) {
if (isInvalid) {
$("#errorMessageClientName").show();
$('.modal').modal('hide');
} else {
$("#errorMessageClientName").hide();
}
}
$( '模态 ')模态(' 隐藏')。是隐藏弹出窗口的行。因此,如果客户端名称已存在且验证失败,则表单将呈现一秒钟并再次关闭。不理想,所以如果有人有更好的答案我会打勾。与此同时,由于这个错误几乎不会发生,这个解决方案就可以了。