Refreshing css after adding element with jQuery

Question

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:

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:

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

If you look in the element inspector, what do the working radios look like vs the broken one? — Whothehellisthat
– Whothehellisthat, Commented Jul 21, 2016 at 11:34
This has nothing to do with "refreshing" css, and everything to do with actually applying the correct style to your dynamically added element(s) — Jamiec
– Jamiec, Commented Jul 21, 2016 at 11:39
@Jamiec I added the same tags as the working ones, I followed the documentation of twitter bootstrap — Aymen Ben Tanfous
– Aymen Ben Tanfous, Commented Jul 21, 2016 at 11:50
I forgot to mention that I'm using a custom bootstrap theme bought from themeforest.net — Aymen Ben Tanfous
– Aymen Ben Tanfous, Commented Jul 21, 2016 at 11:52

Jamiec · Accepted Answer · 2016-07-21 11:56:52Z

1

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

The radio being inside a <div class="radio"> element. or;
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)

answered Jul 21, 2016 at 11:56

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aymen Ben Tanfous Over a year ago

It was relying on the former one :) This was helpful to show the right css then I added some jQuery tweak to make it work:

$("input[type='radio']").parent('span').removeClass('active checked');                 $(this).parent('span').addClass('active checked');

Zaid Al Shattle · Accepted Answer · 2016-07-21 11:34:37Z

1

Your new control doesn't have the class specified. Add the class property to the tags like this:

    var newitem = 'some tags' +
                    '<input type="radio" name="is_default" class="----" value="new_' + size + '"> Default</input>' +
                    'some tags' ;

answered Jul 21, 2016 at 11:34

Zaid Al Shattle

1,5441 gold badge12 silver badges24 bronze badges

1 Comment

Zaid Al Shattle Over a year ago

Also remember that any div around the other controls might change the placement. So that's something else you need to pay attention to!

Collectives™ on Stack Overflow

Refreshing css after adding element with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related