语义 UI 动态添加 class 到输入字段

Question

在 SUI 中动态添加 class 到输入字段似乎有问题。

我的目标是在双击时激活禁用的输入，然后在模糊时再次禁用它。

在 https://jsfiddle.net/Greggg/e1x7jnor/2/ 第一次输入时，我成功地动态添加了 css。在第二个输入中，我试图通过添加 class 来做同样的事情，但它不起作用。

这是代码

<div class="column">
  <div class="ui disabled transparent test2 input">
  <input value="Add class do not work" type="text">
</div>

$(".disabled.transparent.test2").dblclick(function() {
  $(this).addClass('focus').removeClass('disabled transparent');    
  $(this).find('input[type=text]').addClass('active');
});

是 SUI 问题还是编码错误？

如有任何帮助，我们将不胜感激

格雷格

Answer 1

正在添加 class，但由于 specificity，背景颜色被另一条规则覆盖。

此外，由于 class active 是动态添加的，您需要使用 event delegation 来定位这些元素。

/* Focus on double click on page name */
$(".disabled.transparent.test1").dblclick(function() {
  $(this).addClass('focus').removeClass('disabled transparent');
  $(this).find('input[type=text]').css('background-color', 'red');
});

$(".disabled.transparent.test2").dblclick(function() {
  console.log('a')
  $(this).addClass('focus').removeClass('disabled transparent');
  $(this).find('input[type=text]').addClass('active');
});

$('.ui.input').on('blur', '.active', function() {
  alert("test");
  $('input').hasClass('.active').addClass('disabled transparent');
});

.ui.input input.active,
.ui.input.focus input.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<div class="column">
  <div class="ui disabled transparent test1 input">
    <input value="Add css work" type="text">
  </div>
</div>
<div class="column">
  <div class="ui disabled transparent test2 input">
    <input value="Add class do not work" type="text">
  </div>
</div>

语义 UI 动态添加 class 到输入字段

Semantic UI adding class dynamically to input field

javascript

jquery

semantic-ui