web-dev-qa-db-ja.com

jqueryで要素が作成された後に関数を呼び出すにはどうすればよいですか？

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

例：

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

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

静的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'});
38
Thomas Clayson

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

したがって、_<ul>_があり、新しい_<li>_アイテムを動的に作成する場合、$(document).ready()でセレクターをイベントハンドラーに接続して、すべての_<li> __要素はそのイベントに関連付けられます。

liveをデモする jsFiddle サンプルです。

お役に立てれば。

7
David Hoerster

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

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

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

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

これは、別のjsライブラリまたは直接制御外のイベントによって、独自のスクリプトの外部で作成/ロードされたDOM要素に必要な場合があります。

そのようなシナリオでは、ターゲット要素が存在するかどうかを定期的にチェックする間隔を常に設定します。これが真の場合、間隔はそれ自体を削除し、コールバック関数を実行します。

このために、再利用する定義済みの関数があります。

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
Dimitar Nikovski

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

$('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
MEAbid
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

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

});
0
Tomgrohl

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
SnnSnn