使用jQuery，有没有一种创建onclick函数的方法，该函数会将链接从一个UL传递到另一个UL？

Question

例如，我有一个创建链接列表的函数，并且希望能够在单击其中一个填充的链接时将链接的一部分传递到另一个列表。

有没有办法做到这一点？

谢谢您的宝贵时间，希望这个问题不要含糊。

列表创建函数大致如下所示：

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=starcraft&limit=30&&type=top&callback=?", function (data) {
    var temp = "";

    $.each(data.streams, function (index, item) {
        temp = temp + "<li><a target='iframe1' href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + "'>" + item.channel.display_name + "</a></li>";

    });

    $("#list ul ").html(temp);
});

Answer 1

还不清楚您想通过什么。

您可以使用使用data- *属性的自定义数据来传递数据。

$.getJSON("https://api.twitch.tv/kraken/search/streams?q=starcraft&limit=30&&type=top&callback=?", function (data) {
    var temp = "";
    $.each(data.streams, function (index, item) {
        temp = temp 
        + "<li><a target='iframe1'"
        + " data-channel-name='" + item.channel.name +"'" 
        +" href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" 
        + item.channel.name + "'>" 
        + item.channel.display_name + "</a></li>";
    });
    $("#list ul ").html(temp);
});

在动态创建元素时。

您需要使用事件委托 。 您必须使用.on（）使用委托事件方法。

$('#list ul').on('click', "li a[target='iframe1']", function (event) {
    //To prevent default event
    event.preventDefault();
    var href = $(this).attr('href');
    var channelName = $(this).data('channel-name');
})

委派事件的优势在于，它们可以处理来自后代元素的事件，这些事件在以后的时间添加到文档中。

Answer 2

这是您可以做的一个示例，从以下开始：

//de Setup a function to pull in AJAX information and append it to a list.
function exampleAppend() {
    $.getJSON("https://api.twitch.tv/kraken/search/streams?q=starcraft&limit=30&&type=top&callback=?", function(data) {
        var temp = "";

        $.each(data.streams, function(index, item) {
            $("#list ul ").append(
                "<li><a target='iframe1' " +
                "href='http://www.twitch.tv/widgets/live_embed_player.swf?channel=" +
                item.channel.name + "'>" +
                item.channel.display_name +
                "</a></li>"
            )
        });
    });
}

//de Setup your on-click handler.
$(document).ready(function() {
        $("#some_element").click( exampleAppend )
})