Событие JQuery «on появляется»

Question

Мое приложение добавляет некоторые элементы в DOM после вызова $ (document) .ready. Я использую jQuery 1.9.0

Следующий пример работает.

$(document).on("click", "#box-descr", function(evt) { 
    console.log("I showed up"); 
}); 

Однако, я хочу выполнить эту функцию, когда элемент появляется на экране. Здесь я не видел никакого события http://api.jquery.com/category/events/

В основном это одностраничное приложение, поэтому готовый документ вызывается только один раз, но элементы входят и выходят из экрана, когда пользователь взаимодействует с пользовательским интерфейсом.

Answer 1

Может быть, вы хотите .ready() функция:

$("#box-descr").ready(function(){ 
    console.log("I showed up"); 
}); 

или если вы выцветания его в:

$("#box-descr").fadeIn(1000, function(){ 
    console.log("I showed up"); 
}); 

---

Update: Как @Jeff Tian «s comment-

Вам необходимо делегировать событие на ближайший статический pa аренда или в document, как это:

$(document).on("ready", "#box-descr", function(){ 
    console.log("I showed up"); 
}); 

Answer 2

Я думаю, что вы спрашиваете, если вы можете вызвать событие, когда элемент целенаправленный добавляются в DOM. Дайте мне знать, если вы этого не хотите.

$(document).on('click', '#box-descr', function(evt) { 
    console.log("I showed up"); 
}); 

// Later in your code you add the element to the DOM 
$('<div />', { id : 'box-descr' }).appendTo('body'); 

// Then trigger the click event for the added element 
$('#box-descr').trigger('click'); 

Надеется, что это то, что вы ищете

Вы можете сократить это

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click'); 

Answer 3

Событие хороши, но потому, что не родное события для появления событие требуется знать, когда элемент добавляется так, что событие может быть запущено вручную. Вы можете использовать опрос, чтобы проверить появление чего-либо и выполнить действие, когда оно появится. Это отлично подходит для контента, который добавляется вне вашего контроля, например, из пользовательского ввода, ajax или других программ.

setInterval(function() { 
    $('.my-element-class:not(.appeared)') 
     .addClass('appeared') 
     .each(function() { 
      console.log("here I am!") 
     }); 
}, 250); 

Это будет проверять внешний вид элемента по имени класса (или любых других критерии селекторных вы снабжающие) 4 раза каждый второй и запустить код, когда появится новый пункт. После просмотра элемента добавляется класс .appeared для предотвращения повторного обнаружения экземпляра. Если вы хотите протестировать только один вид, вы можете упростить и закрыть опрос после обнаружения.

var testAppearTmr = setInterval(function() { 
    if ($('.my-element-class').length) { 
     clearInterval(testAppearTmr); 
     console.log("here I am!") 
    } 
}, 250); 

JQuery appear плагин построен вокруг этих методов и имеет гораздо больше возможностей, такие как тесты, если элемент находится в области просмотра, но если все, что вы хотите сделать, это тест на несколько пунктов добавляется к домику приведенный выше код намного шире, чем плагин.