События jQuery бьют меня по лицу

Question

Последние четыре часа я пытался выяснить, почему мои события jQuery запускаются несколько раз, что может случиться только один раз. По сути, у меня есть рекламный баннер, который будет вращать изображения с помощью jQuery. Я жду, пока страница загрузится, чтобы загрузить все изображения, кроме того, которое отображается по умолчанию:

$("#mainadslot").prepend('<img>')
.find(":first-child")
.attr("src", src)
.load(function(event) {
    // Global javascript variable itterates here
    // to count how many images have loaded. 
    // If they're all done, we can start rotating
});

И я еще даже не дошел до эффектов, потому что по какой-то странной причине onLoad на изображениях запускается три раза для каждого изображения. Моим первым предположением было пузырение, поэтому я немного покопался и попробовал функцию .stopPropagation () jQuery. К сожалению, это ничего не сделало для меня.

Если бы кто-нибудь мог объяснить мне, почему это происходит, я был бы так рад.

Answer 1

Есть ли у #mainadslot более одного элемента, который можно считать первым ребенком под ним?

Ваше выражение find () будет захватывать всех потомков перво-потомков #mainadslot. Итак, если разметка выглядит так (просто сумасшедший пример):

<div id="mainadslot">
    <div>
        <span>
            <img>
        </span>
    </div>
</div>

У вас будет 3 первенца: div, span и img.

Answer 2

Вы пытались установить обработчик события load () перед атрибутом 'src'?

$("#mainadslot").prepend('<img>')
.find(":first-child")
.load(function(event) {
    // Global javascript variable itterates here
    // to count how many images have loaded. 
    // If they're all done, we can start rotating
})
.attr("src", src);

Согласно документации: загрузка будет работать только в том случае, если вы установили ее до полной загрузки элемента.

Возможно, это не решит твою проблему, но это то, что ты должен изменить в любом случае.