Почему bootstrap не срабатывает на подгруженных через Ajax элементах?

Question

[betelgeuse09]

есть вот такой код:

(function($){
    $(document).ready(function(){
        $('#application-general').on('change', '#select_type', function(){
            var data = {
                task:'application.getApplicationSettings',
                application_type:$('#select_type').val(),
                app_id:$('#application_id').val()
            };
            $.ajax({
                url: ajax_url,
                data: data,
                type: "POST",
                dataType : "json",
                success: function( json ){
		    if (json.error == false){
                        $('#application-settings').html(json.application_settings);
                    };
                },
                error: function( xhr, status, errorThrown ){
			// smth on error
                },
                complete: function( xhr, status ){
			// smth on complete
                }
            });
        });
    });
})(jQuery);

суть работы: в контейнере '#application-general' есть '#select_type' (выпадающий список) и контейнер '#application-settings'. При изменении '#select_type' в контейнер '#application-settings' загружаются новые настройки в зависимости от значения. Все работает прекрасно, но на подгруженных через ajax контролах не срабатывает bootstrap. Что делать? как инициировать работу bootstrap на подгружаемом контенте?

собственно, вот код элемента после обычной загрузки страницы:

<div class="control-group">
<div class="control-label">
<label id="jform_settings_seo-lbl" for="jform_settings_seo" class="hasTooltip" title="" data-original-title="<strong>Метатеги элементов</strong>">Метатеги элементов</label>
</div>
<div class="controls">
<fieldset id="jform_settings_seo" class="radio btn-group btn-group-yesno">
<input type="radio" id="jform_settings_seo0" name="jform_settings[seo]" value="0" checked="checked">
<label for="jform_settings_seo0" class="btn active btn-danger">Нет</label>
<input type="radio" id="jform_settings_seo1" name="jform_settings[seo]" value="1">
<label for="jform_settings_seo1" class="btn">Да</label>
</fieldset>
</div>
</div>

и код элемента после подгрузки через AJAX

<div class="control-group">
<div class="control-label">
<label id="jform_settings_seo-lbl" for="jform_settings_seo" class="hasTooltip" title="<strong>Метатеги элементов</strong>">
Метатеги элементов</label>
</div>
<div class="controls">
<fieldset id="jform_settings_seo" class="radio btn-group btn-group-yesno">
<input type="radio" id="jform_settings_seo0" name="jform_settings[seo]" value="0">
<label for="jform_settings_seo0">Нет</label>
<input type="radio" id="jform_settings_seo1" name="jform_settings[seo]" value="1" checked="checked">
<label for="jform_settings_seo1">Да</label>
</fieldset>
</div>
</div>

разница конечно же, есть, элементы label при обычной загрузке страницы имеют дополнительные классы. Неужели при загрузке через ajax эти классы нужно прописать руками?

Comments

[Андрей Андреев]

Вы бы топик нормально оформили.

[betelgeuse09]

Андрей Андреев: прощу прощения, торопился. сейчас нормально?)

Answer 1

[Андрей Андреев]

Попробуйте вместо

$('#application-general').on('change', '#select_type', function(){

$(document).on('change', '#select_type', function(){

Comments

[betelgeuse09]

нет, результаты те же (

[Андрей Андреев]

betelgeuse09: добавьте html пожалуйста в топик. Если у вас бутрстраповские елементы через дата атрибуты идут, то нужно их явно инциализаровать через js.

[Андрей Андреев]

betelgeuse09: глупое предположение, но у вас не где одинаковые ID не используются?

[betelgeuse09]

явно инициализировать через js - это как?

[Андрей Андреев]

betelgeuse09: getbootstrap.com/javascript к каждому компоненту есть описание как его сделать "Via JavaScript"

[Андрей Андреев]

betelgeuse09: В вашем наверное будет примерно так:
$('.hasTooltip').tooltip();
это после
$('#application-settings').html(json.application_settings);

[betelgeuse09]

Да, с $('.hasTooltip').tooltip(); - это огромный прогресс)), тултипы заработали, getbootstrap.com/javascript - почитал здесь, но не могу понять, как мне инициализировать radio buttons ?

[Андрей Андреев]

betelgeuse09: поясните, какие radio buttons?

[betelgeuse09]

Я добавил в топик 2 примера HTML-кода: первый - код radio button после стандартной загрузки страницы, когда к label добавлены соотв. классы, и второй пример - код после ajax, когда у label нужных классов нет (btn active btn-danger), и выглядят они не по ТЗ. И здесь мне не понятно, собственно, на какой элемент вешать инициалицию, чтобы с 2 парами label+input внутри выглядел как переключаемые кнопки Да/Нет.

[Андрей Андреев]

betelgeuse09: Тут дело не в JS.
Возвращайте с сервера html сразу с этими классами.

[betelgeuse09]

Благодарю Вас, Андрей, за то, что помогли мне найти решение. Дело было все-таки в JS, так как генерацию html отвечает один и тот же код на PHP. Еще раз спасибо))

[Андрей Андреев]

betelgeuse09: рад помочь)

Answer 2

[Илья Шатохин]

После добавления в DOM модель иницилизируйте ваши новые bootstrap элементы. Пример:
$('#jform_settings_seo-lbl').tooltip();

Все методы там.

Answer 3

[betelgeuse09]

Я бесконечно благодарен Илья Шатохин и особенно Андрей Андреев за ответы, которые в итоге помогли мне найти решение! Вопрос решен, отыскал в проекте JS-код, который наводит кастомную красоту, добавляя нужные классы, и после ajax просто выполнил его)).