JQuery .append列表项点击无法触发脚本

Question

我正在处理一个页面，它从一个 XML 文件 加载数据，并填充一个 HTML 无序列表。使用 无序列表 来制作教程页面上的相册，来自于这个页面：点击这里。不幸的是，创建的缩略图无法触发创建扩展预览的 javascript。

当用户点击 无序列表 中的锚点时，javascript 应该被激活。

有何建议以解决此问题将不胜感激。 代码:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: "xml",
            success: xmlParser
        });
    });

    function xmlParser(xml) {
        $('#load').fadeOut();
        $(xml).find("painting").each(function () {
            $("ul#og-grid").append('<li> <a href="http://google.com/" data-largesrc="images/' + $(this).find("image").text() + '"   data-title="' + $(this).find("title").text() + '" ' + '<>' + '<img src="images/thumbs/' + $(this).find("image").text() + '"  alt="img01"/> </a> <li> ');
            $(".painting").fadeIn(1000);
        });
    }
</script>

- Ben Watton

---

“.find（“ painting”）” 应该改为 “.find（‘.painting’）” 吗？ - StackSlave

“Painting”正在搜索XML文件。 - Ben Watton

Answer 1

您需要添加点击事件。您可以在填充li时或之后执行此操作。我会按照以下方式进行：

$(xml).find("painting").each(function () {
    $('<li> <a href="http://google.com/" data-largesrc="images/' + $(this).find("image").text() + '"   data-title="' + $(this).find("title").text() + '" ' + '<>' + '<img src="images/thumbs/' + $(this).find("image").text() + '"  alt="img01"/> </a> <li> ')
        .click(yourClickFunction)
        .appendTo('ul#og-grid');
    $(".painting").fadeIn(1000);
});

不要忘记更改yourClickFunction。 希望这有所帮助。

- Alex Seif

Answer 2

使用此行代码来处理点击事件

$(document).on('click', 'element-selector', function () {
   // Do Stuff Here
});

- Shubhranshu

Answer 3

您可以使用下面的JS代码进行此操作。

$(document).on('click', 'ul#og-grid li', function () {
   // Do Stuff Here
});

- Super User