Jquery 模态窗口 - 模态属性破坏代码

Question

我希望有人可以提供帮助。我在 JQuery 模式窗口中运行表单时缺少一些逻辑和样式，并且“modal”属性设置为“true”。我正在尝试使用来自http://jqueryui.com/dialog/#modal-form 的表单。

在模式窗口外使用的相同代码运行正常。我不确定如何解决它，并决定与您分享。

我在 JSFiddle 中创建了一个页面 - http://jsfiddle.net/vladc77/GcQRg/16 来显示代码。但是，不能从那里运行模态窗口。结果，我在这里上传了相同的测试 - http://www.vladcdesign.com/modalWindow

当我设置 (modal: true) 时，我遇到了以下问题。

1.工作时间表单中的复选框应启用/禁用菜单设置时间

2.“更多”复选框应显示/隐藏文本字段

3.我无法在时间设置表单中设置元素之间的边距。现在所有菜单都相互接触，即使我使用边距样式。他们只是不适用。

所有这些问题仅在我在模式窗口中运行此 DIV 时才会出现。它在模态窗口之外工作正常。我想知道是否有人可以帮助解释代码有什么问题。非常感谢任何建议。

Answer 1

查看小提琴和您在网站上发布的示例，您会收到以下错误：

Uncaught ReferenceError: closedHours is not defined

问题似乎来自这一行：

$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');

此外，您无法在小提琴上加载对话框的原因是您以错误的顺序包含 JS 文件。应该是jquery，jquery ui，然后是jquery ui.selectmenu。

您在复选框上的更改功能也有一个错误，应该是这样的：

$('input[type=checkbox]').change(function() {
    if (!this.checked) {
        $(this).parent().siblings('select').removeAttr("disabled");
    }
    else {
        $(this).parent().siblings('select').attr('disabled', 'disabled');
    }
});

即使我更改了所有这些，复选框仍然不起作用，因此我删除了您的自定义 jquery 和 jquery ui 引用。当我这样做时，它们工作得很好，所以您为自定义这些所做的事情就是导致您的问题的原因。您可以查看我的更改here。

Answer 2

第一个$(document).ready(function(){});和第二个$(function() { });是一样的，代码会按照它们在这些块中的顺序执行.

但是$(window).load(function(){ }); 有点不同，它会在稍后执行。检查此post 以查看差异。

您可以通过将点击事件定义为“打开模式窗口”按钮来进行一些实验，并在触发时执行所有绑定：

$('#create-user').bind('click',function(e){
  // To avoid navigating by link
  e.preventDefault();
  e.stopPropagation();
  // Do every binding / appending 
  // $('.workDayHours').each(function() { ...
});