JQuery click eventhandler: регистрировать событие на динамически добавленном элементе

Question

Я хотел бы динамически построить страницу из 2 хэшей (в моем примере c и d).

var c = { 
    cluster_1 : { list_datasets: [ "a", "b", "c"]}, 
    cluster_2 : { list_datasets: [ "b", "c"]}, 
}; 
var d = { 
    a : { title: "A", content: "aaaaaaaaaaaaaa"}, 
    b : { title: "B", content: "bbbbbbbbbbbbbb"}, 
    c : { title: "C", content: "cccccccccccccc"}, 
}; 

так, что я сначала получить список кластеров, а затем, нажав на кластере, я получаю список их соответствующего содержания. Это прекрасно работает до сих пор.

Но теперь, если я хочу пойти дальше, щелкнув по каждому набору данных, я хотел бы иметь описание набора данных. Операция выбора jquery $ ('# a') пуста и ничего не отображается. Here a little standalone example that shows the problem

Большое спасибо за помощь или любую информацию по этой теме.

Сердечные приветы

Antoine

Answer 1

Поскольку эти элементы создаются динамически, вы должны использовать delegate обработчик события как

$(document).on('click', '#'+key, function(event){ 
     $("aside").html(value.content); 
     }); 

JSFiddle

Answer 2

Ваша проблема заключается в том, что вы называете секунд каждый

$ .each (d, функция (ключ, значение) {..

, когда нет никаких элементов, напечатанные на этой странице. Элементы печатаются только при нажатии на любой из кластеров. Таким образом, вы должны перенести второй каждый с помощью функции, например.

function getValues(){  
$.each(d, function(key, value){ 
    $('#' + key).each(function(){ 

    console.log(value.content); 

    }); 

}); 
}; 

и назвать его в конце клик функции

$('#' + cluster).click(function(event) { 

    var content_list = "<ul>"; 

    for (var i = 0; i < value.list_datasets.length; i++) { 

     var dsName = datasetName = value.list_datasets[i]; 

     if(d.hasOwnProperty(datasetName)) { 
     var datasetName = d[datasetName].title; 

     } 

     content_list = content_list + "<li><a id='" + dsName + "' href='#foo'>" + datasetName + "</a></li>"; 
    } 

    content_list = content_list + "</ul>"; 

    $("section").html(content_list); 
    getValues(); 
    });