JavaScript似乎加载到DOM中，但直到在chrome控制台运行才执行

JavaScript seemingly loaded into DOM but won't execute until run in chrome console

本文关键字：控制台 chrome 运行 执行 加载 DOM JavaScript      更新时间：2023-09-26

我有这个JavaScript文本搜索链接:

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

我可以在search.js的源选项卡中查看，在<head>..</head>部分我有:

<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>元素是: 
<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>

我认为问题是由于.magnifying-glass元素不存在时，您的脚本运行。

试试这个:

$(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，则表示.magnifying-glass不存在。为了解决这个问题，将点击监听器附加到主体上，并将事件委托给.magnifying-glass:

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

(澄清:如果打印的数字大于0，说明我没有回答你的问题!!)

解决这个问题的关键是运行:

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

(请参阅Gershom Maes的回答，全部功劳归他)。

由于记录的结果是0，因此证明在运行相关JavaScript时，正在注册事件侦听器的<div class="magnifying-glass">...</div>不存在。

这样做的原因是<div class="magnifying-glass">...</div>是在初始DOM加载之后由AJAX加载的。

因此解决方案是:

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

。加载<div class="magnifying-glass">...</div>的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()
  })
});

虽然上面的解决方案确实有效，但它无法识别Gershom Maes上面的答案的后半部分，这更简单，并强调在<div class="magnifying-glass">...</div>上注册.click(function(){…})事件侦听器和注册on('click'， ')之间的区别。放大镜'，function(){…})在<body>...</body>上的事件监听器，它将等待<div class="magnifying-glass">...</div>在通过AJAX加载后出现在DOM中。

相关文章：