如何通过JQuery附加到附加元素？

Question

我的问题更多地与为什么会发生有关，而不是与如何解决有关。

我想首先将<li>附加到div，然后将<a>附加到<li> 。

我有以下jQuery代码：

$('.patches').empty();
for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }));
    $('#li'+patches[i].name).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    }));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

附加了<li>但<a>却没有，为什么这不起作用？

编辑 ：我修改了代码，如下所示，它完美地工作：

$('.patches').empty();
for(i=0;i<patches.length;i++){
    var listItem=$('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    });
    $('.patches').append(listItem);
    var aItem=$('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    });
    listItem.append(aItem);
    listItem.append('<p>Version : '+patches[i].version+' Author : '+patches[i].author+'</p>');
}

这个版本与上一个版本几乎相同，我只是使用变量。 我仍然想知道为什么以前的代码版本无法正常工作。 有人可以解释一下吗？

Answer 1

您甚至在追加到DOM之前都要查询DOM。

直接附加到li

for(i=0;i<patches.length;i++){
    $('.patches').append($('<li>', {
        id:'li'+ patches[i].name,
        class: 'list-group-item'
    }).append($('<a>',{
        href:patches[i].downloadUrl,
        text:patches[i].name,
        id:'a'+patches[i].name
    })));
    $('#a'+patches[i].name).append('Version : '+patches[i].version+' Author : '+patches[i].author);
}

Answer 2

您可以创建一个link元素并将其包装在li标记中，然后将其附加到列表中。

请参阅以下内容：

 $(document).ready(function(){ let patches = [ {name: "test1", downloadUrl: "/url1", version: 1, author: "Alessandro"}, {name: "test2", downloadUrl: "/url2", version: 2, author: "Alessandro"}]; $('.patches').empty(); for(i=0;i<patches.length;i++){ let link = $('<a>',{ href:patches[i].downloadUrl, text: 'Version : '+patches[i].version+' Author : '+patches[i].author, id:'a'+patches[i].name }).wrap("<li></li>").parent(); $('.patches').append($(link, { id:'li'+ patches[i].name, class: 'list-group-item' })); } }); $("#btnAdd").click(function(){ $("#atest2").append(";\\tSome new information"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnAdd">Add something to second element</button> <ol class="patches"/> 

如果要引用特定的链接元素，则可以使用其id，例如：

$("#atest2").append(";\tSome new information");

希望对您有帮助，再见。

Answer 3

这些元素是动态创建的。 因此，您需要调用类似这样的内容

$(document).on('event', '.class-name', function(){
    // code
});

Answer 4

修改逻辑，首先将<a>标记添加到<li> ，然后将该<li>标记添加到<div> ...