Discussion :

[Arget]

Bonjour à tous,

Bon il est certain que mon titre est loin d'être clair, et autant être franc avec vous, ce n'est pas non plus très clair dans ma tête ! ^^
Je viens donc vers vous aujourd'hui, car, à force de m'acharner sur quelque chose, je commence à perdre toute logique, et un regard extérieur pourra toujours m'être utile !

Bref, venons-en au coeur du problème:
Actuellement, j'essaye de générer du html, après une fonction ajax. Pour cela, pas de problème. Or, dans cet html que je génère, j'y dispose un bouton (delete) qui permettrait de supprimer cette élément de la liste.

Je vais essayer d'être le plus clair possible, mais en gros, lorsque j'ajoute mes éléments, il n'y a aucuns problèmes. Si je rafraîchit la page, ils sont là, et je peux alors les supprimer (le selecteur ayant pour class "delete" est reconnu). Alors que si j'ajoute cet élément, et que je souhaite le supprimer immédiatement derrière, rien ne marche (la fonction est considérée comme "non-existente"). Il me faut donc rafraîchir la page pour que cela fonctionne.
Et bien sûr, je ne souhaite pas que l'on ai recours à un rafraîchissement de page !

Enfin bref, après maintes tentatives, je vous demande un peu d'aide .
Voici mon code:

Le HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="tableau-droppable">
            <div class="tableau-selection">
                <label>Options du choix multiple : </label><br/>
                <ul id="sortable-options" class="sortable-options" style="background: #f8f8f8; border-radius: 8px; min-height: 150px; max-height: 250px; width: 300px; display: block;">
                    <span id="replaceMeOptions"></span>
                </ul>
                <input type="text" name="valeur" id="valeurOption" maxlength="30" />
                <span class="option_send">Ajouter</span>
            </div>
        </div>

L'ajax qui me génère un XML, que je parse pour créer mon élément de la liste:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(".option_send").click(function() {
 
            var test = $("#valeurOption").val();
            var dataString = 'content='+ test;
 
            if(test=='')
            {
                alert("Entrez du texte avant d'envoyer.");
            }
            else
            {
                $.ajax({
                    type: "POST",
                    url: "AjaxTemplates/AttributValeurManager.php",
                    data: dataString,
                    dataType: 'xml',
                    cache: false,
                    success: function(xml){
                        var string
                        $(xml).find('attribut').each(function(){
                            var id = $(this).find('id').text();
                            var title = $(this).find('titre').text();
                            string = '<li class="ui-state-default" title="' + id + '">' + title + '<span class="delete_option" style="cursor: pointer; float: right; margin-top: 1px;" id="delete-' + id + '" ><img src="img/bibliotheque/delete.png" /></span></li>';
                        });
                        $("#replaceMeOptions").before(string);
                        document.getElementById('valeurOption').value='';
                        document.getElementById('valeurOption').focus();
                        //fnSubmitOptions(true);
                    }
                });
            }
        });

Et enfin, la suppression de l'élément:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.delete_option').click(function() {
 
            var current = $(this);
            var dataString = 'delete=' + current.attr('id').replace('delete-','');
 
            $.ajax({
                type: 'POST',
                url: 'AjaxTemplates/AttributValeurManager.php',
                data: dataString,
                cache: false,
                beforeSend: function() {
                    current.parent().animate({'backgroundColor':'#fb6c6c'},300);
                },
                success: function() {
                    current.parent().slideUp(300,function() {
                        current.parent().remove();
                        //fnSubmitOptions(true);
                    });
                }
            });
        });

Je vous remercie d'avance pour toute l'aide que vous pourriez m'apporter

[Arget]

Bon après un peu plus de recherche, je me rends compte que Jquery est le fautif ... Tout ce qui est contenu dans le :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript" >
    $(function() {
// Toutes mes fonctions (dont celles présentées ci-dessus)
});
</script>

Ne comprend pas qu'il y a des nouveaux éléments. Je suis donc contraint de faire des fonctions extérieures à ça...

Y-a t'il un autre moyen ? Je voulais faire quelque chose de propre ^^

Merci d'avance

[Arget]

J'ai finalement réussi à trouver !

J'ai simplement éditer ma fonction ".click" qui malheureusement ne s’exécutait pas avec les nouveaux éléments.
J'ai utilisé la fonction "live" de jquery et tout marche parfaitement dorénavant !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.delete_attribut').live("click", function() {