Question

我正在使用youtube api加载列表元素的页面上工作。在我的代码中，我有一个空的ul，在加载时动态填充：

setw()

现在我有一个click功能，我需要使用其中一个动态创建的列表元素作为触发器。除Safari外，它适用于任何地方。有没有办法使这项工作，所以Safari甚至可以识别这些元素？我尝试了所有内容，doc准备好，加载，简单功能，顶部，脚本结束等。

EDIT 这里有一些代码

这是我获取列表项的方式

 <ul class="videos" data-plist="PLquImyRfMt6fnpIb9VR9c6VLZwYs_OyWL" data-maxres="20"></ul>

当我复制输出时，我进入我的索引文件，作为静态内容，一切正常。当我从http请求中获取内容时，我使用的单击功能不起作用。

$(document).ready(function() {

$.get(
        "https://www.googleapis.com/youtube/v3/channels", {
            part: 'contentDetails',
            forUsername: channelName,
            key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM',
        },
        function(data) {
            $.each(data.items, function(i, item) {
                var pid = item.contentDetails.relatedPlaylists.uploads;
                getVids(pid);
            });
        });

    function getVids(pid) {
        $("[data-plist]").each(function() {
        var vidResults = $(this).data('maxres');
        var vidPlaylist = $(this).data('plist');
        var mylist = $(this);
        var staffel = mylist.prev().clone().find('h2').children().remove().end().text();


$.get(
                "https://www.googleapis.com/youtube/v3/playlistItems", {
                    part: 'snippet',
                    maxResults: vidResults,
                    playlistId: vidPlaylist,
                    key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
                },
                function(data) {
                    $.each(data.items, function(i, item) {
                        var videoTitle = item.snippet.title.substring(8);
                        var videoDesc = item.snippet.description;
                        var videoThumb = item.snippet.thumbnails.high.url;
                        var videoId = item.snippet.resourceId.videoId;

                        $.get(
                            "https://www.googleapis.com/youtube/v3/videos", {
                                part: 'statistics',
                                id: videoId,
                                key: 'AIzaSyCu8N1RGBaExofEQtBZHMMpAYNxvirhIBM'
                            },
                            function(data) {
                                $.each(data.items, function(i, item) {
                                    var views = item.statistics.viewCount;
                                    var output = '<li class="mix"><a class="yt-vid" href=\"http://www.youtube.com/embed/' + videoId + '?&amp;showinfo=0&amp;controls=0\" target="screen"><div class="thumb" style="background-image: url('+videoThumb+');"></div><div class="caption"><h3>' + videoTitle + '</h3><small>' + views + ' views</small></div></a><div class="infohide" style="display: none;"><a class="js-open-modal" href="#" data-modal-id="' + videoId + '"><small>' + staffel + '</small>' + videoTitle + '</a><div id="' + videoId + '" class="modal-box" style="display: none;"><header><h3>' + videoTitle + '</h3></header><div class="modal-body"><p>' + videoDesc + '</p></div></div></div></li>';

                                    $(mylist).append(output);
                                });
                            });
                    });
                });
        });
    }
});

我尝试将click功能包装在文档就绪，窗口加载中，然后将其放在不同的位置。当然在创建输出的主要功能之后......

Answer 1

我创建了一个示例fiddle。是的，即使我同意，如果您共享代码，我们很容易理解问题并帮助您解决问题。

function createLI(){
    var str = "";
   	for (var i=0; i<7; i++){
    	str += "<li id='li_" +i+"'>Item " +i+ "</li>";
    }
	$("#list").html(str);
}
	
function registerEvents(){
    for (var i=0; i<7; i++){
		$("#li_"+i).on("click", function(){
        	$("#lblResult").text(($(this).text()));
        })
    }
}
(function(){
	createLI();
    registerEvents();
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list"></ul>

Clicked LI element: <span id="lblResult"></span>

修改

我相信问题是当您注册事件时，元素尚未呈现，并可能导致问题。我已经模拟了这个问题。尝试创建回调并在呈现元素后调用它。

function createLI(){
    var str = "";
   	for (var i=0; i<7; i++){
    	str += "<li id='li_" +i+"' class='mix'>Item " +i+ "</li>";
    }
	$("#list").html(str);
}
	
function registerEvents(){
    //for (var i=0; i<7; i++){
    var e = $(".mix");
		$(e).on("click", function(){
        	$("#lblOutput").text(($(this).text()));
        })
    //}
        
    $("#btnAdd").on("click", function(){
    	$("#list").append("<li class='mix'>New element </li>")
    })
}
(function(){
	createLI();
    registerEvents();
})()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list"></ul>
<button id="btnAdd">Add element</button>

Clicked LI: <span id="lblOutput"></span>

希望这会有所帮助。

单击功能无法在Safari上使用动态创建的选择器

1 个答案:

修改