Bonjour,

J'utilise JQuery Confirm afin d'avoir des boites de dialogue plus jolies (http://craftpip.github.io/jquery-confirm/).

J'ai un formulaire où j'ajoute des input text de class "delete" avec JQuery justement en fonction des besoins.
Afin que JQuery fasse effet sur ces input créés dynamiquement, je ne peux pas passer par un "$('.delete)", mais par "$('body').on("click", '.delete', function() {"

Et c'est là que ça coince.

Si j'utilise une boite de confirmation simple "if(confirm("Etes-vous certain.....")", pas de problème, je supprimer ensuite mon élément avec un $(this).remove().

Mais si je passe par JQuery Confirm, impossible de récupérer l'élement en question.

Le code:

HTML

<div class="motcle">
<input type="text" name="motcle[]">
<a href="http://www.google.fr" tabindex="-1" class="delete" title="Supprimer le mot clé"><i class="fal fa-trash-alt"></i></a>
</div>

Javascript qui ne fonctionne pas:

$('body').on("click", '.delete', function() {
	$.confirm({
		title: '',
		content: '<h2><i class="fal fa-exclamation-triangle"></i> Etes-vous certain(e) de vouloir supprimer cet élément ?</h2>',
		useBootstrap: false,
		boxWidth: '600px',
		closeAnimation: 'zoom',
		bgOpacity: 0.8,
		type: 'red',
		buttons: {
			cancel: {
				text: 'Annuler',
				btnClass: 'btn-gray'
			},
			confirm: {
				text: 'Supprimer',
				btnClass: 'btn-red',
				action: function () {
					$(this).parent.remove(); // problème
				}
			}
		}
	});
	return false;
});

Javascript qui fonctionne

$('body').on("click", '.delete', function() {
	if(confirm('Etes-vous certain de vouloir supprimer cet élément ?')) {
		$(this).parent().hide('slow', '', function() {
			$(this).remove();
		});
	}
	// Return false pour éviter un retour en haut de page (href="#")
	return false;
});

Si vous avez une idée, je suis preneur...

J'utilise déjà ce plugin pour confirmer la déconnexion du site et pas de problème.

Merci!

******************************************

EDIT:

Bon, ça faisait super longtemps que je cherchais la solution, et j'ai eu un "éclair de génie" 10min après avoir posé ma question.

Je poste donc la réponse au cas où d'autres seraient confrontés au même problème.

JQuery Confirm n'est pas capable d'accéder à l'élément cliqué en passant par un "on" (expliqué sur la dernière ligne de la doc en fait...).
Il suffit donc de créer une variable "var leThis = $(this)" juste après le "on" et de réutiliser cette variable, tout simplement...

$('body').on("click", '.delete', function() {
    var leThis = $(this);
    $.confirm({
        title: '',
        content: '<h2><i class="fal fa-exclamation-triangle"></i> Etes-vous certain(e) de vouloir supprimer cet élément ?</h2>',
        useBootstrap: false,
        boxWidth: '600px',
        closeAnimation: 'zoom',
        bgOpacity: 0.8,
        type: 'red',
        buttons: {
            cancel: {
                text: 'Annuler',
                btnClass: 'btn-gray'
            },
            confirm: {
                text: 'Supprimer',
                btnClass: 'btn-red',
                action: function () {
                    leThis.parent.remove();
                }
            }
        }
    });
    return false;
});

-
Edité par jouvrard 21 février 2018 à 14:33:08