为什么我的 jQuery .css() 代码没有应用样式？

Question

我查看了多个现有帖子，但没有一个适合我。

编辑：有人问我为什么要使用jQuery(document).ready(function($) 。这是一个 Wordpress 站点。如果你想使用$你必须像这样包装你的 jQuery，因为$被 Wordpress 框架使用，并且会破坏你的代码。

更新

这是动态创建按钮的代码。 我不会这样做，但是当我开始在这里工作时，我已经继承了该站点：

$('nav').before('<button class="menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); 
        $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>'); 

不仅没有应用样式，它们甚至在开发工具中都不可见，所以我知道它们不会简单地被内联样式或其他东西覆盖。 根本没有加载 jQuery css。

细节：

• 控制台日志中没有错误。
• 通过 JS Hint 运行时没有错误
• Chrome 调试器显示执行的代码
• Chrome Elements 选项卡未显示加载的样式
• .site-title的样式完美应用
• .menu-btn根本不适用。

jQuery(document).ready(function($) {

  $('.site-title').css({
    'grid-column-start': '2',
    'grid-column-end': '6'
  });

  $('.menu-btn').css({
    'top': 'unset',
    'right': 'unset',
    'left': '10px',
    'bottom': '15px',
    'z-index': '100',
    'position': 'fixed'
  });
});

当通过 CSS 添加相同的样式时，它们会正确应用。

body > div.site-container > button.menu-btn {
  top: unset;
  right: unset;
  bottom: 15px;
  left: 10px;
  z-index: 100;
  position: fixed;
}

Answer 1

@MDrX 想通了。 我的.menu-btn是动态创建的，因此将我的代码添加到创建按钮的同一个块中，并且它起作用了！

最后结果：

    // Add Mobile Menu Button
    $('nav').before('<button class=".menu-btn" role="button" aria-pressed="false"><span>toggle menu</span></button>'); // Add toggles to menus
    $('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>');
    $('.menu-btn').css ({
        'top':'unset',
        'right':'unset',
        'left':'10px',
        'bottom':'15px',
        'z-index':'100',
        'position':'fixed'
    });

我现在在这里发布答案，但我在等着看@MDrX 是否会发布答案，以便我可以给他信用和那个甜蜜的代表:)