0

夜、

私のjqueryの一部が機能しない理由について少し混乱しています。

例の証明は次のとおりです。 http://jsfiddle.net/FS34t/624/

ご覧のとおり、「ボックス」をクリックすると、そのアラートがトリガーされます。

ただし、これと同じ動作を独自のコードに実装しようとすると、「ボックス」をクリックしてもトリガーされません。

function scroll(e)  { 
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
    var $items = $(balls());                               
    $items.imagesLoaded(function(){
        $container
        .masonry('reloadItems')
        .append( $items ).masonry( 'appended', $items, true );
    });  
}  
}  
function balls(){
$iterator -= 1;
if($iterator < 0){
    var $boxes = $( '<div class="box">No more games!</div>' );
    $container.append( $boxes ).masonry( 'appended', $boxes, false );   
    return; 
}
var $width =  9;
return (
    '<div class="box" style="width:18%">'
    +'<p>'+$test[$iterator][1][2]['name']+'</p>'
    +'<img src="scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' //Replace this with the one below when timthumb is whitelisted
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>'
    +'</div>'
);

なぜかわからない

 $(".box").click(function(event){
     alert("TEST");
 });

ここでは機能しません。私の唯一の推測は、jsfiddle の例では、「ボックス」が HTML で宣言されているのに対し、これらは .js で生成されているためでしょうか?

4

1 に答える 1

2

このコードを実行すると:

 $(".box").click(function(event){
     alert("TEST");
 });

.box要素が作成されて DOM に挿入される前に、イベント ハンドラはインストールされ$(".box")ません。これは、コードの実行時にハンドラをインストールするオブジェクトが DOM 内に見つからない (結果として空の jQuery オブジェクトになる) ためです。

これを修正するには、次の 2 つの選択肢があります。

  1. 今後作成されるオブジェクトがイベントに応答するように、委任されたイベント処理の使用に切り替えることができます。

  2. .box特定の要素を作成した後で、イベント ハンドラーをインストールできます。

委任されたイベント処理 (jQuery 1.7 以降) は次のように機能します。

 $container.on("click", ".box", function(event){
     alert("TEST");
 });

これにより、イベント ハンドラーが $container オブジェクト (ボールが作成される前に既に存在する) にアタッチされ、.boxオブジェクトで発生したバブル アップ イベントを監視します。

jQuery 1.7 より前のバージョンの jQuery では、.delegate().

于 2012-07-11T02:59:42.647 に答える