jQuery .click() 在 Internet Explorer 9/10 中不起作用

Question

下面是一个更大项目的一部分（显然），它在 Chrome、Firefox 和 Opera 中运行良好，但 .click() 函数没有被 IE9 或 10 调用。

jQuery('.current img').hover(function() {
    var thisElem = jQuery(this);

    thisElem.parent().parent().find('.hotspot span:not(.select-image)').remove();
    thisElem.parent().parent().find('.hotspot img').parent().find('span.select-image').remove();

    jQuery('<span class="zoom-out"></span>').prependTo(thisElem.parent()).click(function() {
        z -= .1;
        z = Math.max(z, 1);

        jQuery(this).parent().find('img').attr('src', '<?php echo $urlPrefix; ?>/zcard-thumbnail-image/photos/<?php echo $modelId; ?>/low/' + i + '/' + (w * z) + '/' + (h * z) + '/file');
    });

    jQuery('<span class="select-image"></span>').prependTo(thisElem.parent());

    jQuery('<span class="zoom-in"></span>').prependTo(thisElem.parent()).click(function() {
        z += .1;
        z = Math.min(z, 5);

        jQuery(this).parent().find('img').attr('src', '<?php echo $urlPrefix; ?>/zcard-thumbnail-image/photos/<?php echo $modelId; ?>/low/' + i + '/' + (w * z) + '/' + (h * z) + '/file');
    });
});

据我所知，.click() 没有绑定，因为元素还不存在。如果我改为使用 jQuery(target).prepend(element)，然后发出延迟进一步执行的警报，然后 .click() 绑定，一切正常。不幸的是，用 delay() 替换警报不会产生相同的结果。

请问大家有什么建议吗？

Answer 1

如果您可以创建一个选择器来识别元素，您可以使用delegate() 来附加您的处理程序 - 这适用于尚不存在的元素。

Answer 2

已修复！

事实证明，每次鼠标移到注入的子元素上时，IE 都会触发悬停事件，而其他浏览器只会在悬停在具有绑定的元素上时触发，正如您所期望的那样。

event.stopPropagation 对我不起作用，所以我在 .data() 的帮助下伪造了它。这是最终结果：

jQuery('.current img').hover(function() {
    jQuery(this).parent().addClass('hover');
    jQuery(this).parent().parent().find('.hotspot:not(.hover) span:not(.select-image)').remove();
    jQuery(this).parent().parent().find('.hotspot:not(.hover) img').data('hovered', 'false');
    jQuery(this).parent().removeClass('hover');
    if(jQuery(this).data('hovered') != 'true') {
        jQuery(this).data('hovered', 'true');
        jQuery(this).parent().parent().find('.hotspot span:not(.select-image)').remove();
        jQuery(this).parent().find('span.select-image').remove();
        jQuery(this).parent().prepend('<span class="zoom-in"></span><span class="select-image"></span><span class="zoom-out"></span>');

        jQuery(this).parent().find('.zoom-in').click(function() {
            z += .1;
            z = Math.min(z, 5);

            jQuery(this).parent().find('img').attr('src', '<?php echo $urlPrefix; ?>/zcard-thumbnail-image/photos/<?php echo $modelId; ?>/low/' + i + '/' + (w * z) + '/' + (h * z) + '/file');
        });

        jQuery(this).parent().find('.zoom-out').click(function() {
            z -= .1;
            z = Math.max(z, 1);

            jQuery(this).parent().find('img').attr('src', '<?php echo $urlPrefix; ?>/zcard-thumbnail-image/photos/<?php echo $modelId; ?>/low/' + i + '/' + (w * z) + '/' + (h * z) + '/file');
        });
    }
});

非常感谢大家帮助解决这个问题，我希望以上内容对遇到类似问题的人有用。

Answer 3

还没有尝试过，所以我不确定延迟是否是问题所在，但您可以尝试使用手动 setTimeout 来延迟它：

var zoomOutSpan = jQuery('<span class="zoom-out"></span>').prependTo(thisElem.parent());

setTimeout( function()
{
    zoomOutSpan.click(function() {
        z -= .1;
        z = Math.max(z, 1);

        jQuery(this).parent().find('img').attr('src', '<?php echo $urlPrefix; ?>/zcard-thumbnail-image/photos/<?php echo $modelId; ?>/low/' + i + '/' + (w * z) + '/' + (h * z) + '/file');
    });
}, 1) // just 1 milisecond to execute it on a new thread