javascript - fancybox 输入在 内

Question

此示例显示了我正在尝试执行的操作:http://jsfiddle.net/Dqjvy/

我希望它能够工作，以便当您单击输入删除文件时，无需加载 fancybox 即可工作。

如何在单击输入时阻止 fancybox 加载？这也会阻止表单提交，因为 fancybox 已加载？

HTML:

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_b.jpg" title="Tree and Bench, Newlands Corner (craig.denford)">
    <img src="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_b.jpg" title="Brighton West Pier (George-Edwards)">
    <img src="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_b.jpg" title="Romantic sunset.  EXPLORE (Grbavica)">
    <img src="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" title="Fog (giulio bassi q°ן°p)">
    <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

JavaScript:

$('.fancybox').fancybox();

/*$('.fancybox').click(function(e) {
    e.preventDefault();
    $(this).fancybox();
});*/

Answer 1

将按钮的 onClick 属性替换为 class 属性，并在 js 中添加此 click 处理程序:

HTML:

<input class="delete" type="button" value="Delete" name="delete_file" />

JS:

$('.delete').click(function() {
    if (confirm('Are you sure you want to delete this file?')) {
        // TODO: delete file
        alert('deleted');
    }    
    return false;
});

另请参阅this example .