Ответ HTML от Jquery не работает с JavaScript

Question

Я нашел много постов, похожих на этот вопрос, но я не думаю, что я делаю это неправильно, поскольку я не помещаю javascript в ответ на вызов ajax.

По сути, ajaxвозвращает чистый HTML, который помещается в div.Этот div находится внутри моей страницы, и страница уже содержит ссылки на файлы css и javascript.

В одном из этих файлов javascript я пытаюсь сделать кнопки, возвращаемые вызовом ajax, красивыми с помощью функции jquery ui,в основном то, что я делаю, это

$(".ButtonClass").button();

Этот фрагмент кода находится в функции document.ready, и HTML-код, возвращаемый ajax, включает "ButtonClass" для всех кнопок.

.button() работает для кнопки вне возвращенного HTML ajax, но не работает для элементов, возвращаемых вызовом ajax.

Я думаю, что это должно работать, потому что стили CSS применяются к результатам, но я не могу заставить какую-либо функцию работать с результатами, повторяю, я не возвращаю код JavaScript, у меня есть этот код во внешнем файле, которыйссылка на всю страницу.

Answer 1

Если вы хотите включить кнопки для элементов, возвращаемых запросом AJAX, вы должны выполнить его снова при получении ответа.

.button() выполняется для элементов, которые были выбраны в то время, когда он былПозвонил - который не включает AJAX при вызове до того, как был сделан запрос AJAX.

Обратите внимание, что $(".ButtonClass") также будет включать в себя предыдущие .ButtonClass элементы, поэтому они будут преобразованы в кнопки дважды.Вы должны будете выбрать только те из ответа AJAX.

Answer 2

Вам нужно будет инициализировать эти кнопки после заполнения вашего div.

Если ваш div хранится, например, в переменной javascript, называемой $container, запустите код $('.ButtonClass',$container).button() после добавления этого содержимого на свою страницу.

Answer 3

Функция .button () должна вызываться каждый раз, когда на странице появляется новая разметка, которая должна быть кнопкой. Вы делаете это правильно в .ready (), но вы должны также делать это в функции успеха вызова ajax.

Answer 4

Я думаю, что вам нужно применить функцию декоратора, когда вызов ajax был успешно завершен.Что-то вроде этого:

$('#myelement').load('script.php', function() {

   // Now the page has some more button to decorate:
   $(".ButtonClass .ugly").button().removeClass('ugly'); 

});

Как вы можете видеть, я добавил «уродливый» класс к новым кнопкам, чтобы не заново украшать уже существующие красивые кнопки:)

Answer 5

Попробуйте позвонить

$(".ButtonClass").button();

В режиме обратного вызова ajax.

Answer 6

в вашем обратном вызове для ajax, сделайте это $(".ButtonClass").button(); снова.