Javascript JQuery正在跳过.on赋值

我写了一段代码，通过文本输入过滤卡片。但是，我在方法上遇到了问题。下面是完成此任务的代码

$('.news-card').show(); //Reset everything
console.log("Started"); //This prints

$('#searchbar-sidebar').on('input', function () {
   txt = $('#searchbar-sidebar').val(); //Gets text
   console.log(txt); //This does not print
   $('.news-card').each(function () {
     if (txt === "") {
        $('.news-card').show(); //If there is nothing, show all
     } else {
        if ($(this).data("title").toUpperCase().indexOf(txt.toUpperCase()) !== -1) {
          $(this).show(); //If it matches, then show
        } else {
            $(this).hide(); //If it does not match, hide!
        }
        console.log("3"); //This also does not print
     }
     console.log("2"); //This doesnt print
   });
   console.log("1"); //This doesnt also
 });
 console.log("0"); //This prints

所以我做了两个测试。如果我将此代码粘贴到控制台中并运行它，那么一切都会正常工作。它最初位于

.js

文件中。但后来我用一个

标签将它移动到

正文的底部

所以现在我想知道的事情


我如何阻止这种情况再次发生
在这种情况下，我如何修复它

编辑：
我在下面添加了HTML：



奥托芬奇出版社
$（函数（）{
$（'.news card'）.show（）；//重置所有内容
console.log（“Started”）；//打印
$（“#搜索栏边栏”）。在（'input'，函数（e）上{
var txt=$（“#搜索栏边栏”）.val（）；//获取文本
console.log（“text”，txt）；//这不打印
$（'.news card'）。每个（函数（）{
如果（txt==“”）{
$（'.news card'）.show（）；//如果没有，则全部显示
}否则{
if（$（this.data（“title”）.toString（）.toUpperCase（）.indexOf（txt.toUpperCase（））！=-1）{
$（this）.show（）；//如果匹配，则显示
}否则{
$（this）.hide（）；//如果不匹配，请隐藏！
}
console.log（“3”）；//这也不会打印
}
console.log（“2”）；//这不打印
});
console.log（“1”）；//这也不适用
});
console.log（“0”）；//这会打印
});
将js代码包装为：

$(function(){
  //your code here.
});

基本上，当jquery检测到页面已完全加载时，它将运行您的代码。否则，您的选择器可能尚未加载

这都是假设您的代码可以工作

使用OP中更新的html编辑堆栈片段
这一切似乎都奏效了。不确定问题在哪里



我是一张精美的1号新闻卡（搜索123）
我是一张精美的2号新闻卡（搜索321）
我是一张花哨的3号新闻卡（搜索foo）
奥托芬奇出版社
$（函数（）{
$（'.news card'）.show（）；//重置所有内容
console.log（“Started”）；//打印
$（“#搜索栏边栏”）。在（'input'，函数（e）上{
var txt=$（“#搜索栏边栏”）.val（）；//获取文本
console.log（“text”，txt）；//这不打印
$（'.news card'）。每个（函数（）{
如果（txt==“”）{
$（'.news card'）.show（）；//如果没有，则全部显示
}否则{
if（$（this.data（“title”）.toString（）.toUpperCase（）.indexOf（txt.toUpperCase（））！=-1）{
$（this）.show（）；//如果匹配，则显示
}否则{
$（this）.hide（）；//如果不匹配，请隐藏！
}
console.log（“3”）；//这也不会打印
}
console.log（“2”）；//这不打印
});
console.log（“1”）；//这也不适用
});
console.log（“0”）；//这会打印
});
将js代码包装为：

$(function(){
  //your code here.
});

基本上，当jquery检测到页面已完全加载时，它将运行您的代码。否则，您的选择器可能尚未加载

这都是假设您的代码可以工作

使用OP中更新的html编辑堆栈片段
这一切似乎都奏效了。不确定问题在哪里



我是一张精美的1号新闻卡（搜索123）
我是一张精美的2号新闻卡（搜索321）
我是一张花哨的3号新闻卡（搜索foo）
奥托芬奇出版社
$（函数（）{
$（'.news card'）.show（）；//重置所有内容
console.log（“Started”）；//打印
$（“#搜索栏边栏”）。在（'input'，函数（e）上{
var txt=$（“#搜索栏边栏”）.val（）；//获取文本
console.log（“text”，txt）；//这不打印
$（'.news card'）。每个（函数（）{
如果（txt==“”）{
$（'.news card'）.show（）；//如果没有，则全部显示
}否则{
if（$（this.data（“title”）.toString（）.toUpperCase（）.indexOf（txt.toUpperCase（））！=-1）{
$（this）.show（）；//如果匹配，则显示
}否则{
$（this）.hide（）；//如果不匹配，请隐藏！
}
console.log（“3”）；//这也不会打印
}
console.log（“2”）；//这不打印
});
console.log（“1”）；//这也不适用
});
console.log（“0”）；//这会打印
});
如何阻止发生什么？你没有说结果是什么，除了它不起作用为什么这个问题值得投票？@ScottMarcus，因为这是一个新用户发布了相关代码，描述了情况，并解释了他们以前尝试过的内容。如果没有投票支持他们做正确的事情，他们怎么能在网站上提升呢？@Jean-BernardPellerin这不是问题应该被投票支持的原因。当问题不仅表述正确，而且解释完整（该问题未发布相关HTML，无法复制）并且清楚问题所在时（由于误解OP所说的内容，发布了多个不正确的答案），应向上投票。此外，这个问题以前不应该被问到。我如何阻止这种情况再次发生？这是什么意思？正在发生的事情应该只发生一次，而不是再次发生？你如何阻止这些事情发生？你没有说结果是什么，除了它不起作用为什么这个问题值得投票？@ScottMarcus，因为这是一个发布相关代码的新用户，描述了这种情况