jQuery 焦点事件永远不会被触发答案

【问题标题】：jQuery focus event is never triggeredjQuery 焦点事件永远不会被触发
【发布时间】：2015-02-11 10:18:35
【问题描述】：

我的父元素 <ul class="dropdown-menu big"> 包含子元素，例如 <li><input class="contact-form"></li>。如果其中一个输入被聚焦，我想在父元素上应用一些 css 样式，例如更改背景颜色：

jQuery(document).ready(function(){

   $(".contact-form").focus(function(){
      $(".dropdown-menu.big").css('background-color', '#ff5544');
   });

});

但是这段代码什么也没做，焦点事件没有任何反应，Chrome 调试器中也没有显示错误。

编辑： 选择器中的空格已删除，但没有任何改变。

编辑：问题是，焦点事件永远不会被触发。我将代码更改为alert("Hello! I am an alert box!!");，但没有显示任何警报。这是为什么？

【问题讨论】：

$(".dropdown-menu.big") 删除选择器中的空格。
没用，什么也没有发生。
我想在父元素上应用一些 CSS 样式li 或 ul 是什么。
$(".dropdown-menu.big").css('background', '#ff5544'); 试试background。
是

标签： jquery html css focus

【解决方案1】：

这是一个工作小提琴，背景应用于父 li + blur 函数删除它：https://jsfiddle.net/RexTangle4/o9Lsb91n/

jquery:

$('.contact-form').focus(function () {
    $(this).parent().css({
        backgroundColor: '#ff5544'
    });
}).blur(function(){
     $(this).parent().css({
        backgroundColor: ''
    });
});

【讨论】：

是的，它在小提琴中有效，但在我的模板中无效。
li 输入周围是否有可见区域？（如果它是 display inline-block 并且没有 padding 可能不会），另外，一个重要的标签会覆盖内联样式，那么 CSS 中是否有任何阻碍？
是的，但我发现焦点事件从未触发，我不知道为什么，脚本加载正确。
页面加载没有错误，输入焦点没有错误，脚本加载正确..奇怪。
悬停/点击事件有效吗？或者根本没有事件（例如，文档中的警报已准备就绪）

【解决方案2】：

要么删除空格：

$(".dropdown-menu.big").css('background', '#ff5544');

或者通过DOM遍历通过焦点元素获取：

$(this).closest(".dropdown-menu.big").css('background', '#ff5544');

还有一个建议是不要使用background-color，只需使用background

查看下面的 sn-p：↓

$(':text').focus(function() {
  $(".dropdown.big").addClass('newclass');
});

ul {
  background: greenyellow;
}
.dropdown{ background:red !important;}

.newclass{background:purple !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='dropdown big'>
  <li>
    <input type='text' />
  </li>
</ul>

【讨论】：

这些都不适合我。在 css 文件中定义了一个默认样式。什么是更高优先级 - .css 文件中的 css 样式或 jQuery 设置的样式？
如果在样式中使用!important css hack，那么它将得到那个，而不是用 js 应用一个。因此您可以尝试在新类中添加!important，并将该类添加到元素中：.addClass('newclass')。

【解决方案3】：

尝试使用样式而不是像这样的 css

$(".dropdown-menu.big").focus(function () {
this.style.backgroundColor("red");
    });

并确保你像这样放置和使用真正的 jquery 文件

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

【讨论】：

【解决方案4】：

问题非常愚蠢，我在输入类中有拼写错误 - 'contact-from' 而不是 'contact-form'。

【讨论】：