-1

从 xml 获取数据以插入 ul 标签。当我运行代码时，页面正在加载，我可以在浏览器上看到图像，但 jquery 代码不起作用（例如单击 #GalleryList 元素），因为在浏览器视图源中看不到附加代码。我怎样才能找到解决方案？

JS：

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function (xml) {
            var items = [];
            $(xml).find("item").each(function (i) {
                items.push({
                    img: $(this).find("img").text(),
                    content: $(this).find("content").text()
                });
                $('#GalleryList').append('<li>' + items[i].img + '</li>');
                $('#GalleryDetail').append('<li><div class="detailLeft">' + items[i].img + '</div><div class="detailRight">' + items[i].content + '</div></li>');
                i++;
            });
            return items;
        }
    });
    var currentElem, lastElem;
    lastElem = $('#GalleryList li').last().index();
    $('#GalleryList li').click(function () {
        currentElem = $(this).index() + 1;
        $('#GalleryList').hide();
        $('.GalleryDetail').show();
        $('#GalleryDetail li').hide();
        $('#GalleryDetail li:nth-child(' + currentElem + ')').show();
        pageControl();
    });
});

HTML：

<ul id="GalleryList" class="clearfix">

</ul>
<div class="GalleryDetail">
   <ul id="GalleryDetail">

   </ul>
</div>
4

3 回答 3

1

您需要使用事件委托，因为li元素是动态创建的

$('#GalleryList').on('click, 'li', function () {
    currentElem = $(this).index() + 1;
    $('#GalleryList').hide();
    $('.GalleryDetail').show();
    $('#GalleryDetail li').hide();
    $('#GalleryDetail li:nth-child(' + currentElem + ')').show();
    pageControl();
});
于 2013-08-22T15:25:33.537 回答
0

用$.on("click",..而不用$.click。http://api.jquery.com/on/

于 2013-08-22T15:23:50.707 回答
0

您应该使用on将事件绑定到动态创建的元素：

$('#GalleryList li').on('click', function ()
于 2013-08-22T15:24:12.470 回答