Question

我正试图以这种方式从javascript函数动态生成一些<li>个元素：

function readPicture(file){
    if (file) {
        var reader = new FileReader();
        var randomNumberText = Math.random().toString(36).substring(7);
        reader.onload = function (e) {
            $('.past').append('<li><img data-whatever="'+e.target.result+'" id="picture'+randomNumberText+'"/></li>');
        };

        reader.readAsDataURL(file);
    }

}

在点击事件中，我试图以这种方式获取这些元素：

$('#body').on('click','#upload',function(){
     $('.past').find('li').each(function(){
          console.log('ok');
     });
});

HTML

<button id="upload">ok</button>
<div class="photo_attach">
    <ul class="past"></ul>
</div>

li元素是自动生成的，这是问题的根源。所以任何人都可以给我一些替代方案

Answer 1

我想这个问题出现在下面一行，因为其他代码似乎没问题：

$('#body').on('click','#upload',function(){

应该是：

$('body').on('click','#upload',function(){

从正文选择器中删除#，它会起作用。

＆＃13;

$('.past').append('<li>First item</li><li>Second item</li><li>Third item</li>');

$(function(){
     $('body').on('click', '#upload',function(){
         $('.past').find('li').each(function(){
             console.log('ok');
         });
     });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="upload">ok</button>
    <div class="photo_attach">
   <ul class="past">
    </ul>
</div>

＆＃13;

Answer 2

使用

$(document).on('click','#upload',function(){

而不是

$('#body').on('click','#upload',function(){

<强>更新

请看下面的小提琴。它的工作正常。可能不会添加<li>s，或者您的代码中的点击无效。

FIDDLE

$(document).ready(function(){
    var i=0;
    for(i=0;i<=4;i++){
        $('.past').append("<li><img data-whatever='' id='picture"+i+"'>"+i+"    </li>");
    }

    $(document).on('click','#upload',function(){
        $('.past').find('li').each(function(){
        console.log('ok');
        });
    });
});

Answer 3

使用JavaScript附加新的li时，需要额外的努力来添加一个类dynamic-li

然后让他们回来会更容易

$('.past').find('li.dynamic-li')

Answer 4

尝试编辑您的代码：$( this ).find('.past li').each(function(){

找到动态生成的li元素

4 个答案: