JavaScript似乎已加载到DOM中，但最终获胜'；在chrome控制台中运行之前，请不要执行

我有一个用于文本搜索链接的JavaScript：

$(document).ready(function() {
  $('.magnifying-glass').click(function() {
    $.ajax({
      type: 'GET',
       url: '/search',
      data: $('#nav-search-form').serialize()
    })
  });
});

我可以在

search.js中的“我的源代码”选项卡和我的
部分查看此信息。
我有：

<script src="/assets/jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1"></script>
<script src="/assets/jquery_ujs.self-d456baa54c1fa6be2ec3711f0a72ddf7a5b2f34a6b4f515f33767d6207b7d4b3.js?body=1"></script>
<script src="/assets/search.self-2cca0e1f96075e050d52df6946570db92431ae8071b63b90c85460b3502d0560.js?body=1"></script>



但是，JavaScript似乎没有执行。我本来希望JavaScript本身会有问题，但如果将此JavaScript复制并粘贴到Chrome控制台并运行，则它似乎正在完成其工作（即，搜索表单序列化，发送AJAX请求，单击图标时返回搜索结果）

值得一提的是，绑定事件处理程序的
元素是：

<div class="icon icon--ei-search icon--m magnifying-glass l-inline-block l-fl">
      <svg class="icon__cnt">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ei-search-icon"></use>
      </svg>
</div> 

我认为问题是由于脚本运行时，
放大镜
元素不存在造成的

试试这个：

$(document).ready(function() {
    // This will tell you if the element exists!
    console.log($('.magnifying-glass').length);
    $('.magnifying-glass').click(function() {
        $.ajax({
            type: 'GET',
             url: '/search',
             data: $('#nav-search-form').serialize()
        });
    });
});

检查你的控制台。如果打印了
0
，
放大镜不存在。要解决此问题，请将click listener连接到正文，并将事件委托给
。放大镜
：

$(document).ready(function() {
    $('body').on('click', '.magnifying-glass', function() {
        $.ajax({
            type: 'GET',
             url: '/search',
             data: $('#nav-search-form').serialize()
        });
    });
});

（澄清：如果打印了大于零的数字，则表示我无法回答您的问题！！）
解决此问题的关键是运行：

$(document).ready(function() {
    console.log($('.magnifying-glass').length);
});

（请看格肖姆·梅斯的回答，全部归功于他）

由于记录的结果是
0
，因此证明在运行相关JavaScript时，注册事件侦听器的
..
不存在

原因是，
…
是在加载初始DOM之后由AJAX加载的

因此，解决办法是：

$('.magnifying-glass').click(function() {
  $.ajax({
    type: 'GET',
    url: '/search',
    data: $('#nav-search-form').serialize()
  })
});

在加载
…
的.js.erb模板中，以便脚本在适当的时间运行，如下所示：

$('<%= j(render('shared/nav_searchbar')) %>').insertAfter('#home-link');

# (above) partial that contains <div class="magnifying-glass">...</div> 

$('.magnifying-glass').on('click', function() {
  $.ajax({
    type: 'GET',
    url: '/search',
    data: $('#nav-search-form').serialize()
  })
});

$（“”）.insertAfter（“#主页链接”）；
#（上面）包含。。。
$（'放大镜'）。在（'单击'，函数（）上）{
$.ajax({
键入：“GET”，
url:“/search”，
数据：$（“#导航搜索表单”）.serialize（）
})
});

更新

虽然上述解决方案确实有效，但它无法识别上面Gershom Maes答案的后半部分，后者更简单，并且强调了在
..
上注册.click（function（）{…}）事件侦听器与注册（'click'，'.放大镜'，function（）{…}）事件侦听器之间的区别
..
上的事件侦听器，它将在通过AJAX加载后等待
..
出现在DOM中
 当“ready”处理程序运行时，您确定
是页面的一部分吗？我假设是这样，但我如何才能确定？div不仅存在，而且还具有
放大镜
class@oliverwillder-要查看div是否存在并正确分类，请尝试
console.log（$（'.放大镜'）.length）已准备就绪block@JaromandaX为了验证脚本运行太早的假设，我在处理程序绑定到的div下面插入了一个脚本标记，并在其中运行了脚本。这是可行的，所以以前它必须在div之前运行和/或存在，但是这个解决方案不是可爱的html，你能想出另一种方法吗？结果是0。这可能是因为事件处理程序绑定到的div也是通过AJAX加载的（我之前忘记说过这一点）。我更改了
。单击（…
到
。打开（'click'…
），但这没有效果（根据文档，似乎前者只是后者的快捷方式：）重要的部分是将单击处理程序附加到
body
，并将
上的
的第二个参数设置为
。放大镜'
。这将侦听器附加到html正文（在js运行时保证存在），并导致
body
元素将事件委托给任何与选择器匹配的第二个参数-您错过了我的部分答案！对不起，是的，我没有领会您的意思，这是一个比我在下面发布的更好的解决方案。将侦听器附加到已经存在的内容比使用额外的.js.erb模板要干净得多。我将更新我的答案。