append() mutliple balise

**Atom87** · 25/08/2015, 15h18

désolé...

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
 
 $deleteButtons = '<span class="pull-right"><button class="btn btn-xs btn-danger delete_buttons" class="deletebutton" ><span class="glyphicon glyphicon-trash" style="color:E12121"></span></button></span>';
 
                $.each(currentJson, function(key,value){
                    $listPoints.append($('<a class="list-group-item clearfix">')
                                                                       // .attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data({'latitude':value.latitude,'longitude':value.longitude,'name':value.name})
                                                                       .append($deleteButtons)
                                                                       .data("id",value._id.$oid))
                });
 
   $('.deletebutton').on('click', function(e){
            e.stopPropagation();
            e.preventDefault();
 
            alert('ok');
        })   
 
        // ajax destroy an interest point in list
        $('.deletebutton').on('click',function(e) {
            e.preventDefault();
            $.ajax({
                type: "DELETE",
                url: '/interest_points/', 
                dataType: 'json',
                data: { id: $(this).data('id')},
                success: function(data) {
                    alert('ok')
                }
            });
        });

**SpaceFrog** · 25/08/2015, 15h29

deux fois le on click ??

**Atom87** · 25/08/2015, 15h30

non désolé mais j'ai mis le second on click en commentaire...donc je garde le alert("ok")...quine fonctionne pas

**SpaceFrog** · 25/08/2015, 15h36

deux fois class ??
https://jsfiddle.net/EpG7x/255/

**Atom87** · 25/08/2015, 15h47

non je viens de supprimer la seconde classe ^^

mais cela ne marche toujours pas

**SpaceFrog** · 25/08/2015, 17h08

Aucun message d'erreur en console ?

**danielhagnoul** · 25/08/2015, 23h40

Exemple :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
 
    .list-group-item { display: block; }
 
  </style>
</head>
<body>
 
  <div class="container">
    <div class="list-group"></div>
  </div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      var
        data = [
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Paris",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          },
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Bruxelles",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          },
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Anvers",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          }
        ],
        jObjListPoints = $( ".list-group" ),
        jObjButtons = $( '<span class="pull-right"></span>' ),
        jObjBtnInfo = $( '<button/>', {
          "css" : {
            "display" : "inline-block",
            "margin-left" : "6px"
          },
          "class" : "btn btn-xs btn-info",
          "text" : "Info",
          "click" : function( event ){
            event.preventDefault()
            event.stopPropagation();
 
            // debug, console touche F12
            console.log( "btn-info", $( event.target ).parents( ".list-group-item" ).attr( "href" ) );
          }
        }),
        jObjBtnWarning = $( '<button/>', {
          "css" : {
            "display" : "inline-block",
            "margin-left" : "6px"
          },
          "class" : "btn btn-xs btn-warning",
          "text" : "Warning",
          "click" : function( event ){
            event.preventDefault()
            event.stopPropagation();
 
            // debug, console touche F12
            console.log( "btn-warning", $( event.target ).parents( ".list-group-item" ).data( "name" ) );
          }
        });
 
      jObjButtons.append( jObjBtnInfo, jObjBtnWarning );
 
      $.each( data, function( i, item ){
          $( '<a/>', {
            "class" : "list-group-item",
            "href" : item._id.$oid,
            "text" : item.name,
            "data" : {
              'latitude' : item.latitude,
              'longitude': item.longitude,
              'name' : item.name
            }
          })
          .append( jObjButtons.clone( true, true ) )
          .appendTo( jObjListPoints );
      });
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

**Atom87** · 26/08/2015, 09h44

Voila probléme corrigé :

Code :

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

1
2
3
4
5
        $("#list-interest-points").on('click', "a .delete_buttons", function(e){
            e.stopPropagation();
            e.preventDefault();
            alert('ok');
        })

**SpaceFrog** · 26/08/2015, 10h41

arf oui

on() mais par délégation

append() mutliple balise

jQuery

Discussions similaires

Partager

Partager