Q:

fancybox при клике кнопки next срабатывать event

при клике на class="fancybox-nav fancybox-next"
должен срабатывать event alert("test") вывестись но он не срабатывает 
не могу понять почему

// Activate fancyBox
$(".fancybox")
  .attr('rel', 'gallery')
  .fancybox({
    padding: 0
  });
$(".fancybox-next").on("click", function() {
  alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>


<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" />
</a>

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg">
  <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" />
</a>

http://jsfiddle.net/Py2RA/3173/

A:

Все скрипты у тебя срабатывают при подгрузке страницы.
Следовательно элемент на который ты повесил обработчик "on",еще не создался в документе.
Таким образом твой обработчик нужно вешать только после создания всех элементов управления "fancybox".Более точно - afterShow колбэк тебе поможет.
Вот код:
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

// Activate fancyBox
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0,
        afterShow:function(){
          $(".fancybox-next").on("click", function() {
                    alert("test");
                    });
        }
    });

вот пример : http://jsfiddle.net/Py2RA/3185/

