Muszę dodać Click Handler do elementów dynamicznie wkładanych do DOM za pomocą jQuery, obiekty pochodzą z usługi, która zwraca obiekt, więc w zasadzie mam to (przykładowy obiekt):

Obiekt:

var items = {
    18: {
        content: "<div id=\"content18\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    10: {
        content: "<div id=\"content10\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    34: {
        content: "<div id=\"content34\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    2: {
        content: "<div id=\"content2\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    29: {
        content: "<div id=\"content29\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    56: {
        content: "<div id=\"content56\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    50: {
        content: "<div id=\"content50\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    59: {
        content: "<div id=\"content59\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    46: {
        content: "<div id=\"content46\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    38: {
        content: "<div id=\"content38\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    30: {
        content: "<div id=\"content30\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    12: {
        content: "<div id=\"content12\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    61: {
        content: "<div id=\"content61\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    },
    14: {
        content: "<div id=\"content14\"  > <img src=\"http://www.google.com/images/srpr/logo11w.png\">  </div>"
    }
};

A następnie dodam je do DOM i (spróbuj), aby dodać program obsługi kliknięcia dla każdego dodanego elementu:

var rankingItems = $(".rankingitem"), i = 0, element;
for (var index in items) { 
        $(rankingItems[i]).after(items[index].content);
        // crete listeners
        element = $("#content"+index).click(function() {
            console.log(index);
        });
        console.log(element);
        i++;
}

Problem polega na tym, że bez względu na to, co próbuję, kliknięcie kliknięcia zawsze otrzymuje ostatni przedmiot w obiekcie, ale nie przypisuje obsługi kliknięcia dla każdego. Może coś tutaj brakuje?

Dodano przykład JS BIN:

http://jsbin.com/batadosepara/1/edit.

Dzięki!

0
dmm79 14 sierpień 2014, 09:39

3 odpowiedzi

Najlepsza odpowiedź

Twój index zawsze będzie odnosić się do ostatniego na liście, ponieważ działają zwrotne. Owiń tworzenie słuchacza w Iife, aby się obejść:

(function(i){
    element = $("#content"+i).click(function() {
        console.log(adIndex));
    });
})(index);

Spójrz na to skrzypce, aby uzyskać pomysł, jak to działa: http://jsfiddle.net/7o7bhkey/

1
cfj 14 sierpień 2014, 05:52

Wypróbuj, ON () Funkcja jest dobra dla ulubionych elementów DOM

  var rankingItems = $(".rankingitem"), i = 0, element;
 for (var index in items) { 
         $(rankingItems[i]).after(items[index].content);

        });
         console.log(element);
        i++;


 $("div[id^='content']").on("click",function(){
     console.log($(this).text());
 })
1
vintot 14 sierpień 2014, 05:58

Próbować:

$('body').on('click', 'div[id~="content"]', function(){})
0
JoeSloth 14 sierpień 2014, 05:47