动态制作链接时灯箱不起作用(Mootools注入)

时间:2011-12-30 14:09:07

标签: html dom mootools lightbox

在一个页面上,我有一个工作灯箱,我声明如此

<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>

当我点击链接时,网址不变,灯箱打开正常。当我从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>

然而,当我点击这些链接时,灯箱不会被创建 - 但是网址附加了目标,例如

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

Firebug不会通过浏览器报告任何错误及其相同的行为。任何人都可以看到问题可能是什么?

非常感谢

编辑:

感谢您的协助。很高兴标记你的答案 - 我很感兴趣你不觉得插件写得好,所以我可能不得不寻找更好的灯箱。无论如何使用事件委托如建议这样做了

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

0 个答案:

没有答案