Question

HTML示例：

<div class="row" id="ThumbnailHolder">
    <div class="col-md-12">
        <img src="http://images.sportsdirect.com/images/products/16503236_pit.jpg" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/16503236_l.jpg">
        <img src="http://images.sportsdirect.com/images/products/16503236_piat_a1.jpg" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/16503236_l_a1.jpg">
    </div>
</div>

这是我的代码：

$(document).ready(function() {
    $('.Thumbnails').each(function() {
        $(this).click(function() {
                  var BigImageLink = $( this ).attr( "bigimagelink" );
                  $('#ImgBigLink').attr('href', BigImageLink);
                  $('#productImgDefault').attr('src', BigImageLink);
        });

    });     
});

这个功能很棒。当我点击类Thumbnails的元素时，一切都按照我的需要进行。当我执行以下部分代码时出现问题：

$.ajax({
    url: 'CheckColorPrice.php',
    type: 'POST',
    data: {
        url: '<?php echo $url;?>',
        ColorId: ColorNumber,
        ProductUrl: '<?PHP echo $ProductUrlWithoutCode;?>'
    },
    dataType: 'json',
    success: function (data) {
            $( ".Thumbnails" ).remove();
            $.each(data.thumbnails, function(index, thumbnails) {                             
            $('#ThumbnailHolder div').append('<img src="http://images.sportsdirect.com/images/products/' + thumbnails + '" class="Thumbnails" bigimagelink="http://images.sportsdirect.com/images/products/' + thumbnails + '">');  
            }); 
    }
});

我很确定问题来自$( ".Thumbnails" ).remove();，但是我需要它删除所有带有类Thumbnails的图像，然后将它们替换为附加了相同结构和类的新图像。执行此代码时，Thumbnails上的 CLICK 功能只是没有响应。没有任何输出错误。为什么我的click功能不再起作用？

我很确定你可以帮助我。

提前致谢！

Answer 1

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

当动态生成元素时，您需要使用Event Delegation委托事件方法.on()。

一般语法

$(staticParentElement).on('event','selector',callback_function)

实施例

$('#ThumbnailHolder div').on('click', '.Thumbnails', function(){    
    var BigImageLink = $( this ).attr( "bigimagelink" );
    $('#ImgBigLink').attr('href', BigImageLink);
    $('#productImgDefault').attr('src', BigImageLink);
});

jQuery - 使用remove（）后点击功能不起作用

1 个答案: