jQuery 获取请求后点击功能不工作

Question

我已经处理这段代码一段时间了，但我无法让这个点击功能在 jQuery 中工作。单击关闭图像时，我希望侧边栏消失。当我在控制台中输入点击功能时，它似乎确实有效。另外，如果我将点击功能放在似乎有效的 get 请求的完整功能中。

Javascript（无效）：

'use strict';

$.get('http://api.ipify.org?format=text&callback=?',
  function(text) {
    $('input[name="user_ip"]').val(text);
  }
);

$('.close-trigger').click(function() {
  $('aside.open').removeClass('open');
  return false;
});

Javascript（有效但不整洁）：

'use strict';

$.get('http://api.ipify.org?format=text&callback=?',
  function(text) {
    $('input[name="user_ip"]').val(text);
$('.close-trigger').click(function() {
  $('aside.open').removeClass('open');
  return false;
});
  }
);

我想隐藏的边栏HTML：

<aside id="sidebar">
      <h2>New proposal</h2>
      <a href="#" class="close-trigger"><i class="fa fa-times fa-2x"></i></a>
      <form id="proposal">
        <div>
          <label>Project name</label>
          <input name="project_name" type="text" required>
        </div>
        <div>
          <label>Project description</label>
          <textarea name="project_desc" required>
          </textarea>
        </div>
        <div>
          <a href="#">Upload photo</a>
        </div>
        <!--
        <div id="details">
          <span></span>, <span></span>
        </div>
        -->
        <input type="text" name="user_ip" hidden>
        <input type="submit" value="Submit">
      </form>
    </aside>

正如我所说，如果我在页面运行时将点击功能粘贴到控制台，代码就可以工作。我不确定为什么这不能单独使用。很抱歉提出这样一个具体的问题。

Answer 1

您需要将其包装在一个评估文档何时准备就绪的事件中：

$(function(e){
  // Document is ready...
});

这需要完成，因为如果尚未准备好，您无法通过 DOM 对文档执行任何操作。

这就像试图阅读一篇论文，但他们只打印了一半的文字。

Answer 2

问题是 HTML 页面是同步下载和解析的。这意味着如果您将 script 标记放在 head 中，脚本将在 body 标记尚不可用时执行。因此，如果您尝试在呈现 HTML 页面的 aside 部分之前绑定点击事件，这将不起作用 - 因为 DOM 树中没有 aside .

要解决此问题，您有多种选择。选项一，最简单的。您只需在关闭 </body> 标签之前放置 <script> 标签。这样可以保证 DOM 树完全可用于绑定事件和 DOM 操作。一切都已下载并呈现。

选项二 - 侦听任一 window.onload or DOMContentLoaded 事件。 jQuery 有一个方便的快捷方式。通过将您的代码包装到 $(function() { ... }) 中，您实际上订阅了 DOMContentLoaded 事件。所以你的代码变成：

$(function() {
    $.get('http://api.ipify.org?format=text&callback=?',
      function(text) {
        $('input[name="user_ip"]').val(text);
      }
    );

    $('.close-trigger').click(function() {
      $('aside.open').removeClass('open');
      return false;
    });
});

jQuery 获取请求后点击功能不工作

jQuery click function not working after get request

html

javascript

css

jquery

frontend