当单击时,添加列表项不会触发脚本

[英]JQuery .append list items not triggering a script when clicked on


I am working on a page that loads data from an XML file that populates an HTML unordered list. An unordered list is used to make the gallery from the tutorial on this page. Unfortunately, the created thumbnails do not trigger the javascript which creates the expanding preview.

我正在开发一个页面,该页面从填充HTML无序列表的XML文件中加载数据。无序列表用于从本页面上的教程创建图库。不幸的是,创建的缩略图不会触发创建展开预览的javascript。

The javascript should be activated when the user clicks on an anchor in the unordered list.

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

Any suggestions as to how to resolve this issue would be great.

任何关于如何解决这个问题的建议都是很好的。

Code

代码

<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>

3 个解决方案

#1


2  

You need to attach the click event. You can do this whilst populating your li or after. I would do the following

您需要附加单击事件。您可以在填充li或after时进行此操作。我将做以下的事情

$(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);
});

Don't forget to change yourClickFunction. Hope that helps

不要忘记更改clickfunction。希望这有助于

#2


2  

use this line for click event

使用这一行单击事件

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

#3


2  

You can use following JS code for this

您可以为此使用以下JS代码

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2017/01/28/7df26ccba5e1343bbf21b6fd8d6f10ab.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告