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!
3 odpowiedzi
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/
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());
})
Próbować:
$('body').on('click', 'div[id~="content"]', function(){})