Как я могу вызвать функцию после того, как элемент был создан в jquery? - PullRequest
Новая
       40

Как я могу вызвать функцию после того, как элемент был создан в jquery?

25 голосов
/ 17 июня 2011

Я хочу вызвать функцию после того, как элемент был создан. Есть ли способ сделать это?

Пример: 

$("#myElement").ready(function() {
    // call the function after the element has been loaded here
    console.log("I have been loaded!");
});

Ответы [ 8 ]

38 голосов
/ 17 июня 2011

Как вы создаете элемент?

Если вы создаете его в статическом HTML, тогда просто используйте .ready(handler) или .on("load", handler).Если вы используете AJAX, хотя это еще один чайник рыбы.

Если вы используете функцию jQuery load(), то при загрузке содержимого можно выполнить обратный вызов: 

$('#element').load('sompage.html', function(){ /* callback */ });

Если вы используете функции $.ajax или $.get / $.post в jQuery, то есть обратный вызов: 

$.ajax({
  url: 'somepage.html',
  success: function(){
    //callback
  }
});

Если вы просто создаете элемент и добавляете его следующим образом:

$('body').append('<div></div>');

Тогда вы можете сделать это вместо этого: 

$('<div />', { id: 'mydiv' }).appendTo('body').ready(function(){ /* callback */ });

Но это не имеет значения - потому что это синхронно (что означает, что следующая строка кода не будет работать, пока не будетв любом случае добавили элемент в DOM ... - если вы не загружаете изображения и тому подобное), так что вы можете просто сделать: 

$('<div />', { id: 'mydiv' }).appendTo('body');
$('#mydiv').css({backgroundColor:'red'});

Но на самом деле, говоря, что вы можете просто сделать это: 

$('<div />', {id:'mydiv'}).appendTo('body').css({backgroundColor:'red'});
7 голосов
/ 17 июня 2011

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

Так что, если у вас есть <ul> и вы динамически создаете новые <li> элементы, в вашем $(document).ready() вы можете подключить селектор к обработчику событий, чтобы все ваши элементы <li> были подключены для этого. событие.

Вот пример jsFiddle , который демонстрирует live.

Надеюсь, это поможет.

1 голос
/ 05 сентября 2017

Иногда это необходимо для элемента DOM, созданного / загруженного вне вашего собственного скрипта, либо другой библиотекой js, либо событием вне вашего прямого контроля.

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

Для этого у меня есть предопределенная функция, которую я повторно использую: 

function runAfterElementExists(jquery_selector,callback){
    var checker = window.setInterval(function() {
     //if one or more elements have been yielded by jquery
     //using this selector
     if ($(jquery_selector).length) {

        //stop checking for the existence of this element
        clearInterval(checker);

        //call the passed in function via the parameter above
        callback();
        }}, 200); //I usually check 5 times per second
}

//this is an example place in your code where you would like to
//start checking whether the target element exists
//I have used a class below, but you can use any jQuery selector
runAfterElementExists(".targetElementClass", function() {
    //any code here will run after the element is found to exist
    //and the interval has been deleted
    });
1 голос
/ 14 октября 2016

Вы можете попробовать этот код 

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
  width: 100px;
  background: red;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>
1 голос
/ 17 июня 2011

проверьте .live () лучше всего после того, как элемент создан, * 

$('.clickme').live('click', function() {
      // Live handler called.
});

, а затем добавьте новый элемент: 

$('body').append('<div class="clickme">Another target</div>');
0 голосов
/ 14 мая 2019

Вы можете использовать функцию setInterval для проверки существования элемента: 

var CONTROL_INTERVAL = setInterval(function(){
    // Check if element exist
    if($('#some-element').length > 0){
        // ...
        // Since element is created, no need to check anymore
        clearInterval(CONTROL_INTERVAL);
    }
}, 100); // check for every 100ms
0 голосов
/ 17 июня 2011 
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

   console.log("I have been created!");

});
0 голосов
/ 17 июня 2011

Самое простое - напрямую вызвать обратный вызов после создания элемента:)

...