jQuery.click（）在Internet Explorer 9/10中不工作

下面是一个更大项目的一部分（显然），它在Chrome、Firefox和Opera中运行良好，但IE9或IE10没有调用.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');
    });
});

jQuery（'.current img'）.hover（函数（）{
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（“”）.prependTo（thisElem.parent（））。单击（函数（）{
z-=0.1；
z=数学最大值（z，1）；
jQuery（this）.parent（）.find（'img'）.attr（'src'，'/zcard缩略图/照片//低/'+i+'/'++（w*z）+'/'++（h*z）+'/file'）；
});
jQuery（“”）.prependTo（thisElem.parent（））；
jQuery（“”）.prependTo（thisElem.parent（））。单击（函数（）{
z+=0.1；
z=数学最小值（z，5）；
jQuery（this）.parent（）.find（'img'）.attr（'src'，'/zcard缩略图/照片//低/'+i+'/'++（w*z）+'/'++（h*z）+'/file'）；
});
});

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

---

有人有什么建议吗？

如果您可以创建一个选择器来标识元素，您可以使用附加处理程序-这对尚不存在的元素有效。

没有尝试过，因此我不确定延迟是否是问题所在，但您可以尝试使用手动设置超时来延迟它：

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

var zoomOutSpan=jQuery（“”）.prependTo（thisElem.parent（））； setTimeout（函数（） { zoomOutSpan.单击（函数（）{ z-=0.1； z=数学最大值（z，1）； jQuery（this）.parent（）.find（'img'）.attr（'src'，'/zcard缩略图/照片//低/'+i+'/'++（w*z）+'/'++（h*z）+'/file'）； }); }，1）//在新线程上执行它只需1毫秒 已修复

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

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');
        });
    }
});

jQuery（'.current img'）.hover（函数（）{
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（“”）；
jQuery（this）.parent（）.find（'.zoom-in'）。单击（function（）{
z+=0.1；
z=数学最小值（z，5）；
jQuery（this）.parent（）.find（'img'）.attr（'src'，'/zcard缩略图/照片//低/'+i+'/'++（w*z）+'/'++（h*z）+'/file'）；
});
jQuery（this）.parent（）.find（'.zoom out'）。单击（function（）{
z-=0.1；
z=数学最大值（z，1）；
jQuery（this）.parent（）.find（'img'）.attr（'src'，'/zcard缩略图/照片//低/'+i+'/'++（w*z）+'/'++（h*z）+'/file'）；
});
}
});

---

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

谢谢德克-我真的认为这个想法会奏效，但似乎没有任何效果。我甚至尝试将第一行拆分如下：var zoomInSpan=jQuery（“”）；zoomInSpan.prependTo（thisElem.parent（））；Gah，zoomInSpan=jQuery（“”）；警报（“测试”）；zoomInSpan.prependTo。。。工作正常，但zoomInSpan=jQuery（“”）.delay（100）.prependTo。。。失败：-/zoomInSpan.prependTo（thisElem.parent（））.delay（100）。打开（'click'，…也失败了。这太荒谬了！嘿，Ric，我想帮你。你是否可以用特定问题的骨架版本来设置一个JSFIDLE？如果你把它添加到你的问题中，人们就可以很容易地处理你的问题了！谢谢你回到Dirk，但是是的，它现在确实被修复了：-）由于某种原因，.Stack Overflow不会让我在明天之前标记答案。它也不会让我标记这些帖子中的任何一篇有用，因为我的排名还不够高，这让我觉得有点卑鄙！谢谢Richie，.on（）不推荐使用..delegate（），但不幸的是，这也不起作用。我想可能是因为当.hover（）完成执行后，任何“for future”绑定都会丢失？@Ric-在创建元素的过程中添加事件处理程序，在不委派事件的情况下效果很好，所以这不是问题，还有其他问题。IE9/10确实有一个控制台，控制台中是否有任何错误。很难用所有PHP和变量调试代码可能是在其他地方声明的。控制台显示没有错误。如果我在click事件中放置警报，即不会触发警报，表明从未达到单击，因此我只能假设绑定没有粘住。作为记录，我已经为jQuery 1.8构建了它，但也尝试了1.9和1.9.1，以防核心中出现问题。嗯。。@adeneo，我想我已经准备了一个基本的示例脚本来说明它在IE9/10中不起作用，但不知怎么的，这个示例起作用了！这里似乎确实存在其他问题……你当然在某处声明了

z

，

h

和

w

？哈，我确实声明了=）。它在其他浏览器中都可以完美地工作，如果我使用警报在创建元素和添加绑定之间造成延迟，那么在IE9/10中一切都可以工作。这是我的错