ввод фантазии внутри <a>

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 -атрибут и добавьте этот click -обработчик в свой js:

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;
});

Также см. этот пример .

Answer 2

Чтобы кнопка «Удалить» не активировала fancybox, используйте что-то вроде этого:

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

stopPropagation предотвратит то, что это событие приведет к появлению DOM в элементе Fancybox.preventDefault просто предотвратит действие по умолчанию нажатия кнопки.