Jquery document ready

Question

В моем веб-приложении, когда я нажимаю ссылку, я загружаю некоторую информацию с помощью $ getJSON(); Все это прекрасно работает, но загруженный список не работает, используя тот же сценарий

это мой JQuery код

function loadEspaces() { 
    $(".monEspace").click(function(event) { 
    //alert(event.target.id); 
    $.getJSON("sousEspaces", { 
    idEspaceParent : event.target.id, 
    ajax : "true" 
    }, function(data) { 
    if (data.length > 0) { 
    $("#shuffle-grid").animate({ "opacity": "remove"} , 1000); 
    } 
    var html = ""; 
    for (var index = 0; index < data.length; index++) { 
    html += "<div class='col-lg-4 col-md-4 col-sm-6 col-xs-12 task shuffle-item filtered' data-date-due='2015-11-28' data-priority='3' style='visibility: visible; transition: transform 250ms ease-out, opacity 250ms ease-out; -webkit- transition: transform 250ms ease-out, opacity 250ms ease-out;'>"+ 
    "<div class='panel panel-default'>" 
    +"<div class='panel-heading'>" 
    +"<div class='panel-toolbar text-left'>" 
    +"<span class='checkbox custom-checkbox custom-checkbox-inverse'> <input type='checkbox' name='customcheckbox1' id='customcheckbox1'> <label for='customcheckbox1'>&nbsp;&nbsp;&nbsp;</label>" 
    +"</span>" 
    +"</div>" 
    +"<h3 class='panel-title ellipsis' style='width: 100%;'>" 
    +"<a href='#' class='monEspace' id='"+data[index].idEspace+"'>"+data[index].nomEspace+"</a>" 
    +"</h3>" 
    +"</div>" 
    +"<div class='panel-body'>" 
    +"<div class='row mb15'>" 
    +"<div class='col-xs-12'>" 
    +"<span class='text-muted'>Nom : </span>&nbsp;&nbsp;&nbsp;<strong>"+data[index].nomEspace+"</strong>" 
    +"</div>" 
    +"</div>" 
    +"<div class='row mb15'>" 
    +"<div class='col-xs-12'>" 
    +"<span class='text-muted'>Description : </span>&nbsp;&nbsp;&nbsp;<strong>"+data[index].descriptionEspace+"</strong>" 
    +"</div>" 
    +"</div>" 
    +"<div class='row'>" 
    +"<div class='col-xs-6'>" 
    +"<span class='text-muted'>Partage : </span>&nbsp;&nbsp;&nbsp;" 
    +"<c:if test='"+data[index].partage+"'>" 
    +"<span class='badge badge-success'>Partage</span>" 
    +"</c:if>" 
    +"<c:if test='!"+data[index].partage+"'>" 
    +"<span class='badge badge-warning'>Non partage</span>" 
    +"</c:if>" 
    +"</div>" 
    +"<div class='col-xs-6'>" 
    +"<span class='ico-calendar3'></span>&nbsp;&nbsp;<span class='text-muted'></span>&nbsp;&nbsp;&nbsp;<strong>"+data[index].dateCreation+"</strong>" 
    +"</div>" 
    +"</div>" 
    +"</div>" 
    +"<div class='panel-footer'>" 
    +"<ul class='list-table'>" 
    +"<li>" 
    +"<div class='img-group img-group-stack'>" 
    +"<img src='/elearning/resources/image/avatar/avatar2.jpg' class='img-circle' alt='' title='Ori Duke'> <span class='more img-circle'>5</span>" 
    +"</div>" 
    +"</li>" 
    +"<li class='text-right'>" 
    +"<div class='img-group img-group-stack'>" 
    +"<img src='/elearning/resources/image/avatar/avatar2.jpg' class='img-circle' alt='' title='Ori Duke'> <span class='more img-circle'>5</span>" 
    +"</div>" 
    +"</li>" 
    +"</ul>" 
    +"</div>" 
    +"</div>" 
    +"</div>"; 
    } 
    $("#shuffle-grid").html(html); 
    }); 
    }); 
    } 

$(document).ready(function() { 
    loadEspaces(); 
}); 

Любая помощь, пожалуйста,

Answer 1

JQuery спусковые делать автоматически не применяются к динамически добавлены элементы. Для такого случая необходимо установить триггер на контейнер вновь добавленных элементов (#shuffle-grid в данном примере):

$('#shuffle-grid').on('click', '.monEspace', function(e) { 
    // move code from $(".monEspace").click(function(event) here  
}); 

Это из JQuery documentation:

обработчики событий связаны только с выбранных элементов; они должны существовать в момент, когда ваш код делает звонок .on(). Для обеспечения элементы присутствуют и могут быть выбраны, размещать скрипты после элементов в разметке HTML или выполнять привязку событий внутри документа готовый обработчик. В качестве альтернативы используйте делегированные события для присоединения обработчиков событий .

Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов-потомков, которые будут добавлены в документ позднее. К выбор элемента, который, как гарантируется, будет присутствовать во время присоединения делегированного обработчика , вы можете использовать делегированные события , чтобы избежать необходимости часто прикреплять и удалять обработчики событий. Этот элемент может быть элементом контейнера представления в дизайне модели-View-Controller , например, или документе, если обработчик события хочет контролировать все события пузырьков в документе. Элемент документа доступен в начале документа до , загружая любой другой HTML-код, поэтому безопасно присоединять события там без , ожидая готовности документа.

Answer 2

В этом случае Jquery .on() должны быть использованы, который помогает при прикреплении событие к элементу, который динамически добавляются ..

.on(events [, selector ] [, data ], handler) 

Большинство событий браузера распространяются, от самого глубокого, самого внутреннего элемент (цель события) в документе, где они происходят вплоть до тела и элемента документа. Поэтому общая практика заключается в том, чтобы присоединить событие к элементу документа, которое доступно в начале документа, перед загрузкой любого другого HTML. Поэтому код должен выглядеть так, чтобы список работал.

$(document).on('click', ".monEspace", callbackFunc) 

Здесь callbackFunc не вызывается, когда событие происходит непосредственно на документе (связанный элементе), но только для потомков (внутренние элементы), которые соответствуют селектору. jQuery создает пузырьки события от целевого объекта до элемента, в который прикреплен обработчик (т. е. самый внутренний к внешнему элементу), и запускает обработчик для любых элементов вдоль этого пути, соответствующего селектору.

Хорошая статья: Jquery Event Attachment through .on()