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

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

Пример:

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

Здесь jsFiddle пример demos live.

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

Ответ 3

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

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

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

$('body').append('<div class="clickme">Another target</div>');

Ответ 4

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

$('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>

Ответ 5

Иногда это необходимо для элемента DOM, созданного/загруженного вне вашего собственного script, либо другой библиотекой 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
    });

Ответ 6

$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

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

});

Ответ 7

Вы можете использовать функцию 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

Ответ 8

Самый straight- forward - это прямой вызов обратного вызова после создания элемента:)