Aymen Ben Tanfous Aymen Ben Tanfous - 4 months ago 28
CSS Question

Refreshing css after adding element with jQuery

I'm having problem loading custom css (twitter bootstrap) on radio input when I try to add that element using jQuery.

Here's a screenshot:
enter image description here

When I refresh the page the css of the radio input is loaded (next to the green arrow) but when I click to Add new sequence.

Here is the jQuery code:

$('#btn_addseq').on('click', function (e) {
e.preventDefault();
var newitem = 'some tags' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'some tags' ;
$("#list_sequences").append(newitem);
};


Edit:
My html for the working one:

<label class="mt-radio mt-radio-line" style="margin-top: 6px">
<input type="radio"
name="is_default" value="old_{{ $sequence->id }}" {{ $sequence->is_default ? 'checked' : '' }}>
Default




What I see in inspection:
enter image description here

And this is the code of the item I'm trying to add:

var newitem = '<div class="col-md-4">' +
'<div class="mt-radio-list">' +
'<label class="mt-radio mt-radio-line" style="margin-top: 6px">' +
'<input type="radio" name="is_default" value="new_' + size + '"> Default</input>' +
'</label>'+
'<a class="delete_new_seq" data-id="' + size + '"><i class="fa fa-remove" style="color: red;cursor: pointer;"></i> </a>'
'</div>' +
'</div>' ;

Answer

The rules that govern what an element looks like rely on a particular structure of HTML, in this case it looks like the css rules you use rely on either

  1. The radio being inside a <div class="radio"> element. or;
  2. The radio being inside a <label class="mt-radio mt-radio-line"> element.

(My guess would be the former, however its hard to know for sure without seeing all your css)