35

要素が作成された後に関数を呼び出したい。これを行う方法はありますか？

例：

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

9 に答える 9

45

どのように要素を作成していますか?

静的 HTML で作成する場合は、.ready(handler)またはを使用します.on("load", handler)。ただし、AJAX を使用している場合、それは別のやかんです。

jQuery のload()関数を使用している場合は、コンテンツが読み込まれたときに実行できるコールバックがあります。

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

$.ajaxjQueryまたは$.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'});
于 2011-06-17T13:07:02.973 に答える
7

jQueryライブイベントを調べることができます。DOM で追加の要素が作成された後、または現在一致するセレクターにイベント ハンドラーをアタッチします。

したがって、 があり、<ul>新しい<li>項目を動的に作成する$(document).ready()場合、セレクターをイベント ハンドラーに接続して、すべての<li>要素がそのイベントに接続されるようにすることができます。

デモを行うjsFiddleサンプルを次に示しますlive。

お役に立てれば。

于 2011-06-17T13:04:07.080 に答える
1

要素が作成された後、.live（）をチェックしてください。

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

そして後で新しい要素を追加します：

$('body').append('<div class="clickme">Another target</div>');
于 2011-06-17T13:08:16.193 に答える
1

このコードを試すことができます

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

于 2016-10-14T12:16:10.037 に答える
0 
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

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

});
于 2011-06-17T13:12:01.177 に答える
0

古いスレッドですが、私の場合、大きな追加ツリーの状況があり、いわばインラインで初期化を行いたいと考え、次のことを行いました:

$("<div>").append(
  ...
  $("<div>").foo(...).bar(...).etc(...).each(function(){
    // init code to run after chain of init functions called
  })
...    
)
于 2019-12-12T18:29:40.467 に答える
-1

最も簡単なのは、要素を作成した後にコールバックを直接呼び出すことです:)

于 2011-06-17T13:04:22.357 に答える