Question

我希望在单击按钮（#loadFile）时打开jQuery-UI对话框，提示用户输入文件。这样可以正常工作，但几秒钟后对话框会自动关闭。我希望它保持打开直到用户关闭它，或者直到我用代码指定它（例如，当选择文件时）。我无法弄清楚为什么会这样。

$('#accordion').accordion({
  collapsible: true,
  active: 1,
  beforeActivate: function(event, ui) {
    // The accordion believes a panel is being opened
    if (ui.newHeader[0]) {
      var currHeader = ui.newHeader;
      var currContent = currHeader.next('.ui-accordion-content');
      // The accordion believes a panel is being closed
    } else {
      var currHeader = ui.oldHeader;
      var currContent = currHeader.next('.ui-accordion-content');
    }
    // Since we've changed the default behavior, this detects the actual status
    var isPanelSelected = currHeader.attr('aria-selected') == 'true';

    // Toggle the panel's header
    currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));

    // Toggle the panel's icon
    currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);

    // Toggle the panel's content
    currContent.toggleClass('accordion-content-active', !isPanelSelected)
    if (isPanelSelected) {
      currContent.slideUp();
    } else {
      currContent.slideDown();
    }

    return false; // Cancels the default action
  }
});

$(document).ready(function() {
  $(".btn").button();
  $("#dialog").dialog();
  $("#dialog").dialog("close");
});

$("#loadFile").click(function() {
  $("#dialog").dialog("open");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>

<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">

</head>

<body>

  <div id="accordion">
    <h3>Cards</h3>
    <div>This is where the cards you pick from will appear</div>

    <h3>Control Box</h3>
    <div>
      <form>Draft number:
        <input type="text" placeholder="#">
        <input type="submit" value="Search for Draft" class="btn">
        <button class="btn" id="loadFile">Load from file</button>
      </form>

    </div>

    <h3>Picks Log</h3>
    <div>This is where your picks will be displayed</div>

  </div>

  <div id="dialog" title="Upload Draft Log" class="filePrompt">
    <form>Click the browse button in order to select the log file on your hard-drive.
      <br>
      <br>
      <input type="file">
    </form>
  </div>

  <script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
  <script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
  <script src="js/index.js"></script>

</body>

Answer 1

这是因为您已经通过单击按钮没有type属性的表单中的按钮来指定要打开的对话框。 A button's default type is submit，所以当您点击按钮时，您正在提交表单。最简单的解决方案是在按钮上设置一个除提交之外的类型，例如“按钮”。

<button type="button" class="btn" id="loadFile">Load from file</button

<强> jsFiddle example

jQuery-UI对话框会在几秒钟后自动关闭

1 个答案: