使用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 )
})