jQuery .klicken Sie auf() funktioniert nicht in Internet Explorer 9/10

Den unten, ist Teil von einem größeren Projekt (offensichtlich) und es ist in Ordnung, die in Chrome, Firefox und Opera, aber der .klicken Sie auf () - Funktionen nicht aufgerufen IE9 oder 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');
    });
});

Soweit ich das beurteilen kann, der .klicken Sie auf() ist nicht verbindlich, da die Elemente noch nicht existieren. Wenn ich stattdessen mit jQuery(Ziel).prepend(element), dann eine Warnung Verzug die weitere Ausführung, und dann das .klicken Sie auf() bindet, funktioniert alles einwandfrei. Leider ersetzen die Warnungen mit delay() nicht in der gleichen.

Hat jemand Vorschläge, bitte?

Und du hast natürlich erklären z, h und w irgendwo ?
Ha, ich habe =). Es funktioniert alles einwandfrei und in anderen Browsern, und wenn ich mit alerts zu einer Verzögerung zwischen der Erstellung des Elements und das hinzufügen von ein zu binden, alles, was auch die Arbeit im IE9/10. Es ist, als ob der IE ist einfach zu langsam bei der Aktualisierung der DOM befestigen, binden unmittelbar nach der Erstellung.
Es ist eine viel ältere version aber das gleiche problem zu sein scheint in dieser (mock, wireframed bauen, der Teil des Systems bin ich jetzt Debuggen möchte, die ich fürchte, ich kann nicht Zugang zu): Entwicklung.qweb.co.uk/tim-bailey/zcard

InformationsquelleAutor Ric | 2013-05-19

1

Wenn Sie können erstellen Sie einen Selektor zur Identifizierung der Elemente, die Sie nutzen könnten delegate() zum anbringen Handler - das funktioniert für Elemente, die noch nicht existieren.
- Dank Richie. .delegate() veraltet durch .auf() und dies ist nicht arbeiten entweder leider. Ich denke, vielleicht, weil, wenn die .hover() abgeschlossen ist, alle 'für die Zukunft' bindet verloren gehen?
- Das hinzufügen des event-handlers bei der Erstellung eines Elements wie Sie tun, funktioniert gut, ohne die übertragung der Veranstaltung, so dass ist nicht das problem, etwas anderes ist. IE9/10 ist eine Konsole, gibt es irgendwelche Fehler in der Konsole. Es ist schwer zu Debuggen des Codes mit allen PHP und Variablen, die wahrscheinlich erklärt, woanders etc.
- Die Konsole zeigt keine Fehler. Wenn ich einen Alarm innerhalb des click-Ereignisses, DH nicht, lösen Sie es darauf hinweist, klicken Sie auf nie erreicht wird, so kann ich nur annehmen, dass die binden nicht kleben. Für das Protokoll, ich habe diese Seite gebaut für jQuery 1.8 aber haben auch versucht, die 1.9 und 1.9.1 falls etwas behoben haben, die in den Kern.
- Hmm... @adeneo, ich dachte, ich würde zusammen ein basic-Beispielskript, um zu zeigen, das funktioniert nicht im IE9/10, aber irgendwie ist das Beispiel funktioniert! Es scheint etwas anderes ist ja das problem hier...
InformationsquelleAutor RichieHindle

Behoben!

Es stellte sich heraus, IE ausgelöst wurde das hover-Ereignis jedes mal, wenn die Maus sich über der injizierten Kind-Elemente, während andere Browser wurden nur auslösen, während Sie die Maus über das element, das binden, wie man es erwarten würde.

Veranstaltung.stopPropagation war nicht für mich arbeiten, so dass ich es fälschte mit Hilfe .Daten(). Hier ist das Endergebnis:

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

Massiven Dank an alle für die Hilfe mit diesem ein, und ich hoffe, dass die oben ist nützlich, um jemanden mit ähnlichen Problemen.

InformationsquelleAutor Ric

0

Habe es nicht versucht, also ich bin mir nicht sicher, ob die Verzögerung ist das problem sowieso, aber Sie können versuchen, verschob es mit einem manuellen setTimeout:
```
var zoomOutSpan = jQuery('').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
```
- Danke Dirk - ich dachte wirklich, dass die Idee funktionieren würde, aber es scheint keine Auswirkungen haben. Ich habe sogar versucht, die Spaltung der ersten Zeile wie folgt: var zoomInSpan = jQuery(''); zoomInSpan.prependTo(thisElem.parent());
- Gah, zoomInSpan = jQuery('');alert('test');zoomInSpan.prependTo... funktioniert, aber zoomInSpan = jQuery('').delay(100).prependTo... schlägt fehl :-/
- zoomInSpan.prependTo(thisElem.parent()).delay(100).auf('click', ... schlägt zu. Das ist doch lächerlich!
- Hey Ric, ich würde gerne helfen. Ist es möglich, dass du ein jsfiddle mit einem Skelett-version von dem spezifischen problem? Wenn Sie hinzufügen, dass auf deine Frage, es macht es wirklich einfach für Menschen zu spielen, um mit Ihrem problem!
- ahh, warten Sie, Sie fixen es schon! never mind 😉
- Vielen Dank für das springen zurück auf Dirk, aber ja, es ist ja nun behoben :-). Stack-Überlauf wird nicht lassen Sie mich markieren Sie die Antwort bis morgen aus irgendeinem Grund. Ist es auch nicht lassen, mich daneben jeder dieser Beiträge als nützlich, weil mein Rang nicht hoch genug, die ich fühle mich ein wenig über meine!
InformationsquelleAutor Dirk Boer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.