Question

当我使用$（＃id .class）作为选择器时，我的对话框（'open'）没有打开对话框窗口。如果我使用$（。class）作为选择器，它工作正常。我需要使用$（＃id .class）作为选择器，因为dom中可能有多个.class元素。

以下示例显示它不起作用： https://jsfiddle.net/b7nth5tm/

<style>
.myPopUpDiv {
  display:none;
}
</style>

<div id="myDiv">
  <div class="myPopUpDiv">
    Why does the chicken crosses the road
  </div>
</div>

$(document).ready(function() {
    //dialog('open') is not opening the dialog box when using $('#myDiv .myPopUpDiv') as
    //selector.  But it works fine when using $('.myPopUpDiv') as selector. 
    $('#myDiv .myPopUpDiv').dialog({
        autoOpen: false,
        title: 'Test',
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            },
        }
    });
    $('#myDiv .myPopUpDiv').dialog('open');
})

Answer 1

它不起作用，因为jQuery UI在将.dialog() - 函数应用于元素时更改了DOM。

检查你的dom时可以看到。 div#myDiv为空，不再包含div.myPopUpDiv。

JQuery使用附加标记将div.myPopUpDiv附加到正文的末尾。

这是应用dialog后标记的样子：

<div id="myDiv">
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ui-dialog-buttons" tabindex="-1" role="dialog" aria-labelledby="ui-id-1" style="display: none; outline: 0px; z-index: 1000; position: absolute;">
  <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">Test</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div>
  <div class="myPopUpDiv ui-dialog-content ui-widget-content" style="display: block;">
    Why does the chicken crosses the road
  </div>
  <div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
  <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
  <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">
      <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button>
    </div>
  </div>
</div>

为此，您可以使用appendTo - 选项进行对话（注意这只适用于jQueryUI版本＆gt; = 1.10）：

$('.myPopUpDiv').dialog({
    autoOpen: false,
    appendTo: "#myDiv",
    title: 'Test',
    buttons: {
      "Ok": function() {
        $(this).dialog("close");
      },
    }
  });


  $('#myDiv .myPopUpDiv').dialog('open');

Example

Answer 2

试试这个片段，它会搜索＃mydiv＆＃39;对于带有＆＃39; .myPopUpDiv＆＃39;的元素类。

$('#myDiv').find('.myPopUpDiv');

这是一个带有工作示例的jsfiddle

https://jsfiddle.net/hukbvgqx/1/

我将jquery绑定到变量以防止写入两次。

代码更改在这里。

$(document).ready(function() {
    //dialog('open') is not opening the dialog box when using $('#myDiv .myPopUpDiv') as
  //selector.  But it works fine when using $('.myPopUpDiv') as selector. 
  var myDialog = $('#myDiv').find('.myPopUpDiv');
    myDialog.dialog({
    autoOpen: false,
    title: 'Test',
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        },
    }
    });

  myDialog.dialog('open');
})

使用$（＃id .class）作为选择器时，jquery ui对话框（'open'）无效

2 个答案: