當單擊時,添加列表項不會觸發腳本

[英]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
});

注意!

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



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