Ссылка Fancybox не работает после ajax

Question

Я создал fancybox форму:

$("a.productForm").fancybox({
    'hideOnOverlayClick' : true,
    'modal' : true,
    'hideOnContentClick' : false,
    'showCloseButton' : false,
    'padding' : 0,
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'autoScale'     : false,
    'autoDimensions': false,
    'frameWidth': 717,
    'frameHeight': 900,
    'overlayOpacity': 0.4,
    'centerOnScroll' : false,
    'type': 'ajax',
    'ajax': {
    dataFilter: function(data) {
        return $(data).find('#form_wrapper')[0];}
}
}); 

Вы можете увидеть на этой странице, как это работает.

Чтобы просмотреть мою форму fancybox, нажмите зеленую кнопку:

Как вы видите, все прекрасно работает на этой странице, но мой код не работает встраница, на которой товары загружаются с помощью ajax.Вы можете увидеть эту страницу.

Когда вы нажимаете зеленую кнопку на этой странице, fancybox просто не будет отображаться, вместо этого он перейдет прямо к ссылке.Что может быть не так?

Может быть, мне нужно применить код fancbox к этой ссылке после ее загрузки с помощью AJAX?

Answer 1

Вам необходимо выполнить $ ("a.productForm"). Fancybox (...) в обратном вызове ajax success после получения html-данных и добавления их в dom.

Вотпростой пример:

$.ajax({
  url: "test.html",
  success: function(data){
    $('#newest_desc').html(data); // Here you insert data which I'm expecting to be a string with html into the tab with the id "newest_desc". I got that from your website. Not sure if it's correct though.
    $("a.productForm").fancybox(...) // Here is where you call the fancybox function because now you know that the element a.productForm is available.
  }
});

Answer 2

Кажется, у вас есть некоторые ошибки в вашем JavaScript. Это приводит к тому, что браузер ведет по ссылке.

Установите Firebug, если у вас его еще нет, включите консоль и нажмите «сохранить». Таким образом, ошибка не исчезнет, ​​когда браузер изменит страницу, и вы увидите ошибку.