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

要防止点击“删除”按钮激活fancybox，请使用以下内容：

$('input[name="delete_file"]').click(function(e){
  e.stopPropagation()
});

stopPropagation将阻止该事件将DOM冒泡到Fancybox元素。 preventDefault只会阻止点击按钮的默认操作。

Answer 2

使用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。

<a></a>内的fancybox输入

2 个答案: