0

我正在尝试从动态生成的 div 中获取 id：

html:

<div id="resultats_son_div">
    <input type="text" name="titre_son" size="20" maxlenght="255" id="titre_son" class="texte_titre_son" placeholder="Titre du morceau">
    <div class="resultats_son" id="resultats_son">

<div class="titre_morceau" id="titre_morceau"><span style="display:none;" id="http://api.soundcloud.com/tracks/67232803">http://api.soundcloud.com/tracks/67232803</span><a href="#" onclick="return false;" class="lien_son" id="lien_son">Ed Sheeran - Give Me Love</a></div>
<div class="titre_morceau" id="titre_morceau"><span style="display:none;" id="http://api.soundcloud.com/tracks/9930614">http://api.soundcloud.com/tracks/9930614</span><a href="#" onclick="return false;" class="lien_son" id="lien_son">Ellie Goulding - Lights (Bassnectar Remix)</a></div>
<div class="titre_morceau" id="titre_morceau"><span style="display:none;" id="http://api.soundcloud.com/tracks/91141832">http://api.soundcloud.com/tracks/91141832</span><a href="#" onclick="return false;" class="lien_son" id="lien_son">Empire Of The Sun - Alive (Zedd Remix)</a></div>
....
....

</div>
</div>

我想获取单击时生成的跨度的 id（我需要它们生成一个新的 div，其内容链接到此 id）。

我的 jquery 来生成它们：

$(document).ready(function() {
$("#titre_son").keyup(function(e){
       var q = $("#titre_son").val();
       $.getJSON("http://api.soundcloud.com/tracks.json?callback=?", {
           q: q,
           client_id: "4346c8125f4f5c40ad666bacd8e96498",
           limit: "10"
       },
       function(data) {
           $("#resultats_son").empty();
           $.each(data, function(i,item){
            var str = item.title;
            var str_clean=str.replace(/'/g,"\'");
               $("#resultats_son").append("<div class='titre_morceau' id='titre_morceau'><span style='display:none;' id='" + item.uri + "'>" + item.uri + "</span><a href='#' onclick='return false;' class='lien_son' id='lien_son'>" + str_clean + "</a></div>");
           });
       });
    });
});

$(document).ready(function() {
    $('#resultats_son_div').show();
    $('#player_son_div').hide();
    $('#player_son').hide();
    $('#resultats_son').click(function(){
        $('#resultats_son_div').hide();
        $('#player_son_div').show();
        $('#player_son').html("<iframe class='iframe' width='445' height='166' scrolling='no' frameborder='no' src='https://w.soundcloud.com/player/?url=" + $(this).find('span').html() + "&amp;auto_play=false&amp;auto_advance=false&amp;buying=true&amp;liking=false&amp;download=true&amp;sharing=true&amp;show_artwork=true&amp;show_comments=false&amp;show_playcount=true&amp;show_user=true&amp;start_track=0&amp;callback=true'></iframe>").show(); //Show second div on click event
        return false;
    });
});

有什么建议么？谢谢

4

2 回答 2

1

使用类而不是 id。当您没有唯一 ID 时，查询的行为是不可预测的。

于 2013-06-14T14:43:03.803 回答
0

向您的处理程序函数添加一个event参数，然后使用它event.target来获取<a>被单击的元素。从那里您可以上到父级<div>并返回到<span>.

$('#resultats_son').click(function(event){
    var spanId = $(event.target).parent('div').children('span').attr('id');

    $('#resultats_son_div').hide();
    $('#player_son_div').show();
    $('#player_son').html("<iframe ...></iframe>").show(); //Show second div on click event
    return false;
});
于 2013-06-14T14:59:31.840 回答