Question

在我的Web应用程序中，当我点击链接时，我使用$ 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标记中的元素或在文档中执行事件绑定   准备好的处理或者，使用委派事件来附加事件   处理程序。

委派活动的优势在于他们可以处理来自的活动   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   element可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他HTML，因此可以安全地在那里附加事件   等待文件准备好。

Answer 2

在这种情况下，必须使用jquery .on（），这有助于将事件附加到动态添加的元素中。

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

大多数浏览器事件从文档中最深的最内层元素（事件目标）传播，一直到正文和文档元素。因此，通常的做法是在加载任何其他HTML之前将事件附加到文档头部中可用的文档元素。所以代码应该看起来像这样才能使列表生效。

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

当事件直接发生在文档（绑定元素）上时，不会调用callbackFunc，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

好文章：Jquery Event Attachment through .on()

Jquery文件准备好了

2 个答案: