javascript - 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

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

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

选项二 - 监听 window.onload 或 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;
    });
});