Question

我正在尝试将文件夹中的所有图像加载到div（id =“wrap”）但是它的点击功能不起作用。为什么呢？

以下是我的代码。

<script>
    $(document).ready(function() {

        var folder = 'images/print/thumb/'
        post_data = {'folder':folder};

        $.post('get_images.php', post_data, function(images){
            for (var i = 0; i < images.length; i++) {

                var tag = '<img class="thumb"  src="' + folder + images[i] + '" />';

                $("#wrap").prepend(tag);
            }

        }, 'json');

        $(".thumb").click(function(){
            alert(this.id);
        });

    });
</script>

<body>
    <div id="wrap" style="padding:20px;">
    </div>
</body>

它可以完美地加载图像。唯一的问题是点击事件。

Answer 1

尝试将事件注册部分放在ajax回调中，

 $.post('get_images.php', post_data, function(images) {

       for (var i = 0; i < images.length; i++) {
         var tag = '<img class="thumb"  src="' + folder + images[i] + '" />';
         $("#wrap").prepend(tag);
       }

        $(".thumb").click(function(){
            alert(this.id);
        });   

 }, 'json');

或者最好的方法是使用event delegation，

 $("#wrap").on("click", ".thumb", function(){
    alert(this.id);
 });

Answer 2

我认为这会更容易......

$.post('get_images.php', post_data, function(images) {
    $.each(images, function(key, img){
        $('#wrap').prepend('<img class="thumb" onClick="myFunction()" src="' + folder + img + '"/>');
    });
});

function myFunction() {
    // your stuff here
}

动态创建的图像的onclick（）不起作用

2 个答案: