Question

似乎在向SUI中的输入字段动态添加类时存在问题。

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

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

这是代码

<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

该类正在添加，但由于specificity，背景颜色被其他规则覆盖。

此外，由于动态添加了课程active，因此您需要使用event delegation来定位这些元素。

＆＃13;

/* 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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

语义UI动态地将类添加到输入字段

1 个答案: