Semantic UI adding class dynamically to input field

Question

It seems there is an issue with adding class dynamically to input field in SUI.

My goal is to active a disabled input on double click, then disabled it again on blur.

On https://jsfiddle.net/Greggg/e1x7jnor/2/ on first input I am adding css dynamically with success. On second input, I am trying to do the same just by adding class and it does not work.

Here is code

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

Is it a SUI issue or a miscoding?

Any help would be appreciated

Greg

score 1 · Accepted Answer · edited May 23 '17 at 11:44

The class is getting added, but the background color is getting overriden by another rule because of specificity.

Also since the class active is dynamically added, you need to use event delegation to target those elements.

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

Semantic UI adding class dynamically to input field

1 Answers1