语义用户界面动态添加类到输入字段

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来定位这些元素。

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