PHPで動的に作成された要素のイベントをキャッチする

Question

ウェブページ「items.php」に、URLにGETパラメータの内容を渡した隠した<p>要素を追加しました。それで私はdocument.readyでこれを作った。setup()関数を直ちに呼び出す。

このセットアップ機能は、この隠された<p>要素の内容を読み出し（これは、items.phpの下部にscriptタグに追加されitems.jsである）とAJAX呼び出しを行い、PHPにエコーデータが行わで添加されますページのコンテナ（<div>）。 （データベースへのリクエストが行われ、この隠しファイル<p>に基づいてチェックボックスが作成され、他の入力データも生成されます）。今ここに

は問題です：

視覚的な観点のすべてとほとんど（私は私自身、DIV要素のいくつかの色のチェックボックスを作った）点にあります。私のjQuery UIレンジスライダはありません。

また、作成したマークアップのイベントは、私のitems.jsにキャッチできません。私が作成した色付きのチェックボックスをクリックするとトグルが起こるはずです。さて、これはすべてデータが動的に生成されなかったときに機能しましたが、今はそうではありません。私はリスナーをセットアップ機能の後に追加しました。例えば：

$(document).ready(function() { 
    setup(); 
    $(".colorbox").click(function(){ 
    $(this).children().toggle(); 
    });  
}); 

これは私のjavascriptです。カスタムイベントをトリガーすることができません：

function setup() { 
    var determinant = $("#cat").text(); 
    $.post('../phpdatabase/setup.php', { 
     categorija: determinant 
    }, function(data) { 
     $('#content').empty(); 
     $('#content').append(data); 
    }); 
}; 



$(document).ready(function() { 
    setup(); 
    $('body').on('click', '.colorbox', function() { 
     $(this).children().toggle(); 
    }); 
    $('body').on('myCustomEvent', '#slider-range2', function() { 
    alert("hye!"); 
    }); 
    $('body').trigger('myCustomEvent'); 

}); 

myCustomEventがトリガーされていません。 2番目の引数がなければ、ハンドラでトリガされます。

Answer 1

既に存在しているか、動的に後から追加するかどうかをあなたが、その後、bodyあなたは。これはbodyでクラス'.colorbox'を持つすべての要素のために働くだろうしたいセレクタにイベントを添付することができます。

コード：jQueryのUIスライダの

$('body').on('click', '.colorbox', function(){ 
    $(this).children().toggle(); 
}); 

あなたはまた、独自のイベント'elements-created-dynamically-with-php'を作成し、動的コンテンツを追加するときに、それを発射することができます。

イベントハンドラ取り付け：コンテンツが追加されたときにイベントを発生

$('body').on('elements-created-dynamically-with-php', '#slider-range2', function() { 
    var $slider = $(this), 
     $amount1 = $('#amount1'); 

    $slider.slider({ 
    range: true, 
    min: 0, 
    max: 400, 
    values: [0, 400], 
    slide: function (event, ui) { 
     $amount1.val(ui.values[0] + 'cm' + ' - ' + ui.values[1] + 'cm'); 
    } 
    }); 

    $amount1.val($slider.slider('values', 0) + 'cm - ' + $slider.slider('values', 1) + 'cm'); 
}); 

をそして：

$('body').trigger('elements-created-dynamically-with-php');