Using jQuery, is there a way to create an onclick function that will pass a link from one UL to another?

Question

For instance I have a function that creates a list of links and would like the ability to have it where upon click of one of the populated links it passes part of the link to another list.

Is there a way to do this?

Thank you for your time, I hope this question wasn't to vague.

This is roughly what the list creating function looks like:

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

its no clear what you want to pass.

You can use custom data using data-* attributes to pass 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);
});

As you are creating elements dynamically.

You need to use Event Delegation . You have to use .on() using delegated-events approach.

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

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Answer 2

Here is an example of what you can do, to start from:

//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 )
})