Twitter Bootstrap Question posted in

Refreshing css after adding element with jQuery – Twitter bootstrap

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

2

Answers


  1. 0

    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' ;
    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search