Question

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

在模态窗口外使用的相同代码正确运行。我不知道如何解决它并决定与你分享。

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

当我设置（模态：true）时，我遇到了以下问题。

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

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

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

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

Answer 1

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

未捕获的ReferenceError：未定义closedHours

问题似乎来自这条线：

$(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以查看差异。

你可以通过将点击事件定义到你的“打开模态窗口”按钮来experminet，并在触发时执行所有绑定：

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

Jquery模态窗口 - 模态属性中断代码

2 个答案: