Question

以下是较大项目的一部分（显然），它在Chrome，Firefox和Opera中运行良好，但IE9或10不会调用.click（）函数。

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（）绑定，一切正常。不幸的是，用延迟（）替换警报不会产生相同的结果。

有人有建议吗？

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

jQuery .click（）无法在Internet Explorer 9/10中运行

3 个答案: