Question

我正在尝试在动态创建的元素上触发click事件。我使用.on（）来绑定click事件，但似乎触发器方法在创建元素之前触发。我尝试在几个位置触发点击，似乎没有任何效果。任何帮助，将不胜感激。我试图触发使用$（'container：first-child'）创建的第一个跨度上的点击。触发器（'click'）;

displayThumbnails = function() {

        $(photoArray).each(function(index) {
            var thumbnailImg = this.SmallImageUrl,
            largeImg = this.LargeImageUrl,
            thumbnailId = 'thumbnail' + index,
            largeImgId = 'image' + index;

            if(index > indexCount) {
                return false;
            } else if (index >= indexStartValue && index <= indexCount) {

                $(thumbContainer).append(
                    '<span class="thumbnail" id="' + thumbnailId + '"><img height="45px" width="60px" src="' + thumbnailImg + '"/></span>'
                );

                $(thumbContainer).on('click', '#' + thumbnailId, function(){
                    $(thumbContainer).find('.active').removeClass('active');
                    $(this).addClass('active');
                    $('#displayed-image').attr('src', largeImg);
                });
            }
        });
    };

Answer 1

几个月后，我正在重温这一点。这些天IMO的答案是触发点击以便进行后续的函数调用过于依赖。如果您试图触发点击以在页面上发生某些事情，您可能会以错误的方式思考它。我最后重新考虑了这一点，并且有一个处理大图像的功能。基本上，我试图触发点击加载图像。

通过重新思考这个过程，我得到了更清晰的代码 - 一切都是独立工作来处理一个小功能。

此外，我从未接受过其他两个答案的原因是.on（）是从1.7.1开始在jQuery中绑定事件处理程序的方法。

Answer 2

我认为可能失败的是新控件和触发器功能之间的绑定。尝试使用“live”而不是“on”

$(thumbContainer).live('click', ...)

Answer 3

如果在调用.on之后创建元素，那么它将不会绑定事件。

正如@AlejoBrz所提到的，您可以尝试使用.live，但您也可以查看.delegate函数，因为根据您的具体情况，这可能会有效。

[edit]刚才意识到.on与你使用的.delegate完全相同。所以，在第二个想法，因为你在创建元素之后绑定一个事件，也许你可以用这个替换.on行：

$('#' + thumbnailId).bind('click', function () { // the rest of your code here

我应该注意，随着缩略图数量的增加，这种解决方案不会很好地扩展。

在动态创建的元素上使用.trigger（）

3 个答案: