Question

我已经解决了这段代码一段时间了，我无法让这个点击功能在jQuery中运行。当我点击关闭图像时，我希望侧边栏消失。当我在控制台中输入单击功能时，它似乎确实有效。此外，如果我将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功能，代码就可以运行。我不知道为什么这对它本身不起作用。很抱歉这是一个特定的问题。

Answer 1

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

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

这需要完成，因为如果尚未准备就可以通过DOM对文档执行某些操作。

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

Answer 2

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

要解决此问题，您有几个选择。选项一，最简单。您只需在关闭<script>代码之前添加</body>代码。这样就可以保证DOM树完全可用于绑定事件和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;
    });
});

获取请求后jQuery单击功能不起作用

2 个答案: