лайтбокс не работает, когда ссылки создаются динамически (Mootools inject) - PullRequest
Новая
       20

лайтбокс не работает, когда ссылки создаются динамически (Mootools inject)

0 голосов
/ 30 декабря 2011

На странице у меня есть рабочий лайтбокс, который я объявляю вот так 

<a href="#mb_inline" rel="lightbox[inline 360 180]" title="">inline content »</a>
<div id="mb_inline" style="display: none;">
    <span style="color: #999999; text-align: center;">This is an example of content that was hidden on the page, and opened in Mediabox using an anchor link.<br/><br/>
    <a href="" onclick="Mediabox.close();return false;">close onClick »</a></span>
</div>

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

var ss = $('holderdiv');
    $e('div', {
       'id': 'mb_inline_' + eRow.toString() + '_' + eCol.toString(),
       'style': 'display:none',
        'children': [
         $e('span', {'id': 'span_' + eRow.toString() + '_' + eCol.toString()}),
         $e('img', {'src': input[i % (input.length)].MediaItemPath.toString(), 'title': 'popacular'})
      ]

    }).inject(ss);

    var dd = $('linkholder');
      $e('a', {
      'title': '',
      'rel': 'lightbox[inline 360 180]',
      'href': '#mb_inline_' + eRow.toString() + '_' + eCol.toString(),
      'text': 'test'}).inject(dd);

Сгенерированные ссылки имеют одинаковый формат, т.е. 

<a title="" rel="lightbox[inline 360 180]" href="#mb_inline_0_-1">test</a>

<div id="mb_inline_0_-1" style="display: none;">
 <span id="span_0_-1"></span>
 <img src="/media/276/3.jpg" title="popacular">
</div>

Однако, когда я нажимаю на эти ссылки, лайтбокс не создается - но к URL добавляется цель, например, 

 http://acme.com/test.html#mb_inline_0_-1  instead of 
 http://acme.com/test.htm

Firebug не сообщает ни об ошибках, ни о своем поведении в браузере. Кто-нибудь может увидеть, в чем проблема?

Большое спасибо

Edit:

Спасибо за вашу помощь. Рад отметить ваш ответ - мне интересно, что вы не чувствуете, что плагин написан хорошо, поэтому мне, возможно, придется поискать лучший лайтбокс. В любом случае, используя делегирование событий, как было предложено, это помогло 

$$('div.tile a').each
(
.addEvent('click:relay(a)', function(e){
e.stop();
Mediabox.open('#mb_inline', 'javascript trigger', '360 180');
return false;
});

)

...