Функция успеха jQuery .ajax не отображает html с элементами пользовательского интерфейса jQuery

Question

Как мне загрузить html в мой div из .ajax рендера с помощью jquery?функция успеха загружает HTML, но эти элементы не отображаются как элементы пользовательского интерфейса jQuery, а только статические типы HTML.Есть указатели?

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html); 
        }
    });
});

});

Answer 1

Что мне нужно было сделать, это сначала внести данные (html) в указанный div, а затем инициализировать плагин для каждого из элементов внутри html.Как и так:

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html);
                             // Initialize UI Items
            $("input:submit", ".callsubmit").button();
            $("#hotorcold").buttonset();
            $("#calldatep").datepicker();
            $("#callbackdatep").datepicker();   
        }

    });

});

});

Answer 2

Это только мое предположение, потому что я не увидел ваш полный код:)

Что если вы добавите еще одну строку в ваш код, например:

$(function() {
$('input[type=image]').click(function(){
    $.ajax({
        url: '_includes/callinfo.php',
        data: 'id=' + $(this).attr('value'),
        dataType: "html",
        success: function(html){
            $('#callwindow').html(html); 
        }
    return false;     //here is the line
    });
});

Эта дополнительная строка предназначена для предотвращения действия html по умолчанию (когда вы нажимаете на вход, вроде как). Может быть полезно, потому что я был в подобных ситуациях, что функция обратного вызова не будет работать ...

Answer 3

Элементы пользовательского интерфейса jQuery применяются только к исходному документу DOM. Вам необходимо применить эти преобразования пользовательского интерфейса к любым элементам, добавленным в DOM, даже после загрузки документа. Допустим, я использую выбираемый компонент пользовательского интерфейса jQuery .

$(function(){
    // Initialize the selectable plugin on all elements with the selectable class
    $('.selectable').selectable();
    // Whenever this button is clicked, it adds a new div to the body
    // with the selectable class
    $('input[type=button]').click(function(){
        $('body')
            .append("<div class='selectable'>New Div</div>") // Add the new div to the DOM
            .children('.selectable:last') // Traverse the body's children and grab the last child (the one we just added to the DOM) 
            .selectable(); // Initialize the plugin on the newly added div
    });
});

Вам понадобится что-то похожее на код в обработчике click для вашего успешного обратного вызова.

Answer 4

Тип MIME на сервере, вероятно, не был установлен в text/html. jQuery проверяет тип MIME для обработки данных с сервера. Я видел, как вы установили dataType вручную.

Анализ ответа

Проверьте, не содержит ли ваш ответ кодировку HTML, поэтому <> становятся < и gt; соответственно. Если это нормально, поэтому смотрите HTML как строку, а не как фактические элементы HTML.