JQuery AJAX таблицы на страницу, но теперь наложения colorbox больше не работают

Question

Я использую AJAX для динамического обновления страницы с таблицей данных.

Когда таблица успешно добавлена ​​на страницу, она содержит некоторую ссылку на код для создания всплывающих окон с наложением colorbox.

Однако после того, как таблица была перетащена на страницу, эти наложения больше не работают.

Есть идеи? Я предполагаю, что они должны быть повторно инициализированы или что-то?

Answer 1

Я только что столкнулся с подобной проблемой.Я не уверен, что я на 100% понимаю решение, но я в основном получил его так:

    $.get('/ajax.php?action=roomList&restriction='+limit, function(data) {
      $('#roomList').html(data).fadeIn();
      $('.cb').colorbox({maxWidth:500,maxHeight:700});
    });

В моих ссылках у меня есть class = cb для подключения к colorbox.Здесь есть maxWidth и maxHeight, потому что в Firefox появилось новое цветное окно, которое по какой-то причине было ОГРОМНО ...

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

Answer 2

Без какого-либо кода немного сложно дать точный ответ, но связывание вашей функции colorbox с .live() звучит так, как будто это решит проблему.

http://api.jquery.com/live/

Прикрепить обработчик к событию для всех элементы, которые соответствуют текущему селектор, сейчас или в будущем .

Это или вам следует подождать, пока ваш ajax-вызов будет успешным, чтобы элемент существовал, и затем связать вашу функцию color box;

$('.link').ajaxSuccess(function() {
  $('a.gallery').colorbox();
});

http://api.jquery.com/jQuery.ajax/

http://api.jquery.com/ajaxSuccess/

Answer 3

Я написал функцию на главной странице, откуда делается запрос Ajax, и вызвал эту функцию по атрибуту click ссылки, по которой я хочу вызвать:

функция ImgClick (imgid) {

 $('body #txtHint').find('a.'+imgid).colorbox({rel:imgid });

}