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

我已经处理这段代码有一段时间了，我无法让这个单击函数在jQuery中工作。当我点击一个关闭的图像时，我希望一个侧边栏消失。当我在控制台中输入click函数时，它似乎确实工作了。另外，如果我将click函数放在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>

---

正如我所说的，如果我在页面运行时将click函数粘贴到控制台上，代码就会正常工作。我不知道为什么它自己不起作用。抱歉，这是一个如此具体的问题。

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

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

这需要完成，因为如果文档还没有准备好，就无法通过DOM对其执行某些操作

---

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

问题在于HTML页面是同步下载和解析的。这意味着，如果您将script标记放在头部，脚本将在body标记不可用时执行。由于这个原因，如果在呈现HTML页面的旁白部分之前尝试绑定click事件，这将不起作用，因为DOM树中没有旁白

要解决此问题，您有几个选项。选项一，最简单的。您只需在结束标记之前放置标记。这样可以保证DOM树完全可用于绑定事件和DOM操作。所有内容都已下载并呈现

选项二-监听或事件。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;
    });
});

---

把你的剧本放在一边。或者将其包装到$function{/*您的代码*/}。除非DOM已准备就绪，否则无法定义DOM事件。@dfsq谢谢！我不知道为什么会这样。。。你肯定不需要用包装纸包装它吧？如果你将此作为答案提交，我会接受它，给你25分……@JamenMarz回答，我会+1。我认为DOM已经加载，所以这个答案很有意义。我认为这个问题很愚蠢，所以我有我的备用帐户，所以我不能投票支持你的答案，尽管它非常有用，谢谢。不用担心，这是一个好问题。window.onload和DOMContentLoaded事件之间也存在差异。稍后将在呈现HTML树时触发，但在下载图像、视频、iFrame资源之前触发，因此在window.onload时响应更快。最后，您可以经常看到$document.readyfunction{…}。这与DOMContentLoaded的较短版本$function{…}相同。