jQuery 代码在控制台中有效，但在站点中无效

Question

我在 wordpress 网站中有以下 jQuery 代码。

jQuery(document).ready(function() {
   jQuery(".responsive-menu > .menu-item").click(function(event){
   if (event.target !== this)
   return;
   jQuery(this).find(".sub-menu:first").slideToggle(function() {
   jQuery(this).parent().toggleClass("show");
  });
 });
});

被切换的类将“.sub-menu”元素从“none”显示为“block”。

它在chrome dev工具的控制台中可以正常工作，但在页面中却不行，它是在创建DOM元素之后放置的。

如果我将代码更改为以下代码，则会执行警报，因此 jQuery 代码执行没有问题。

 jQuery(document).ready(function() {
  alert("working");
 });

关于为什么会这样的任何建议？

编辑：

解决办法是

jQuery(".menu-item").click(function(event){

而不是

jQuery(".responsive-menu > .menu-item").click(function(event){

感谢大家的帮助

Answer 1

试试这个。

(function($){
   $(document).ready(function() {
       $(".responsive-menu > .menu-item").on('click',function(event){
           if (event.target !== this)
               return;
           $(this).find(".sub-menu:first").slideToggle(function() {
               $(this).parent().toggleClass("show");
           });
        });
    });
})(jQuery)