Question

我正在尝试从动态生成的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>

我想知道在cliked时生成的跨度的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;
    });
});

有什么建议吗？感谢

Answer 1

使用类而不是ID。如果没有唯一ID，则查询的行为是不可预测的。

Answer 2

向处理程序函数添加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;
});

如何从动态生成的div中选择一个id？

2 个答案: