fancybox Eingang innerhalb von <a>

Dieses Beispiel zeigt, was ich zu tun versucht: http://jsfiddle.net/Dqjvy/fancybox Eingang innerhalb von <a>

Ich mag es so arbeiten, dass, wenn Sie die Eingabe, um die Datei zu löschen, dies ohne Belastung fancybox funktioniert.

Wie kann ich verhindern, dass fancybox geladen wird, wenn Sie auf den Eingang klicken? Dies verhindert auch das Senden des Formulars, weil fancybox geladen ist?

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(); 
});*/

Quelle

2012-04-01 John Magnolia

das macht keinen Sinn –

Ich schlage vor, einfach 'input' außerhalb von' a' zu bewegen, damit fancybox nicht ausgelöst wird, wenn Sie auf die Schaltfläche klicken (vielleicht ein Wrapperdiv für jedes Bild erstellen). Sie können CSS verwenden, um die Schaltfläche ordnungsgemäß zu platzieren. Siehe http://jsfiddle.net/Dqjvy/3/ –

Ich möchte nicht die zusätzliche Markierung hinzufügen und es ist einfacher, die Schaltfläche "Löschen" über dem oberen Rand des Bildes zu positionieren, wenn es innerhalb des "a" ist. –

Ersetzen Sie die onClick -attributes der Tasten mit einem class -Attribut, und fügen Sie diese click -Handler in Ihrem 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; 
});

Siehe auch this example.

Quelle

2012-04-01 11:20:43 scessor

Perfekter Dank, keine Ahnung, warum ich didn Ich denke, das zu versuchen. –

die Schaltfläche Löschen von Aktivierung des fancybox klicken Um zu verhindern, so etwas wie folgt verwenden:

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

stopPropagation verhindern wird, dass Ereignis vom sprudeln herauf das DOM zum Fancybox elem ent. preventDefault würde nur die Standardaktion des Klickens auf die Schaltfläche verhindern.

Quelle

2012-04-01 11:00:56 frontendbeauty

Aber es folgt dann der Link: http://jsfiddle.net/Dqjvy/5/ –

fancybox Eingang innerhalb von <a>

Antwort

Verwandte Themen