1

いくつかのデータを取得し、ある種のオーバーレイ ウィンドウを生成する関数があります。これには、ウィンドウを閉じるためのボタンが追加されます。理由はわかりませんが、閉じるボタンに対して .click が発生することはありません(アラートは発生しません)。関連する関数は次のとおりです。

    //This is what gets appended
function createOpponentMenu(item1, item2) {
    $('<div id="matchMenu"><div id="vs">VS</div><div id="opponent1">' + item1.media + '<div id="vote1">VOTE</div><div class="desciption-container"><h2 class="match-hed">' + item1.name + ' | <span style="font-family:SupriaSans-Regular">' + item1.when + '</span></h2><p class="match-text"><span style="color:red;font-family:SupriaSans-Bold">OFFENSE:</span> ' + item1.offense + '</p><p class="match-text"><span style="color:green;font-family:SupriaSans-Bold">OUTCOME:</span> ' + item1.outcome + '</p></div></div><div id="opponent2">' + item2.media + '<div id="vote2">VOTE</div><div class="desciption-container"><h2 class="match-hed">' + item2.name + ' | <span style="font-family:SupriaSans-Regular">' + item2.when + '</span></h2><p class="match-text"><span style="color:red;font-family:SupriaSans-Bold">OFFENSE:</span> ' + item2.offense + '</p><p class="match-text"><span style="color:green;font-family:SupriaSans-Bold">OUTCOME:</span> ' + item2.outcome + '</p></div></div><div id="matchup-close">Close X</div></div>').appendTo('#bracket-container').fadeIn("slow");
}

// This decides what to append
$(".matchup-container").click(function() {
    for(var i=0; i<matchups.length; i++) {
        if(this.id == "matchup" + (matchups[i].match).toString()){
            createOpponentMenu(matchups[i].id1, matchups[i].id2);
        }
    }
});

    //now I just want to kill the whole thing on close click
$('#matchup-close').click(function() {
    alert("wtf");
    $('#matchMenu').fadeOut("slow").remove();
});
4

2 に答える 2

1

要素を動的に作成しているため、委任を使用する必要があります。要素はバインド時に存在する必要があります。そうしないと、イベント ハンドラーが要素にアタッチされません。

クリック時に要素を作成しています-別の要素のクリック時にイベントハンドラーをバインドしていると想定しています

$('#bracket-container').on('click','#matchup-close',function(){

});

委任することで、イベント ハンドラーを静的な親要素にアタッチし、要素のイベントをリッスンし、バブルアップしたときにそれを処理します。

また、使用しているjQueryのバージョンによって異なります

$(selector).live(イベント、データ、ハンドラー); // jQuery 1.3+

$(document).delegate(セレクター、イベント、データ、ハンドラー); // jQuery 1.4.3+

$(document).on(イベント、セレクター、データ、ハンドラー); // jQuery 1.7+

于 2012-10-05T16:27:08.820 に答える
0

一般的なコード:

##### JQuery Part #####
 $(document).ready(function(){
 function createOpponentMenu() {
   $('<div id="matchMenu"></div>').append($('<div id="matchup-close">Close X</div></div>').click(function(){
       $(this).parent("#matchMenu").fadeOut("slow").remove();  
     })).appendTo('#bracket-container').fadeIn("slow");
}

$(".matchup-container").click(function() {
  createOpponentMenu();
 });
});

####### HTML PART ####
<body>
<a href="#" class="matchup-container">Click Me !! </a><div id="bracket-container"></div>
</body>

この質問には、これを試してみてください。

function createOpponentMenu(item1, item2) {
  $('<div id="matchMenu"><div id="vs">VS</div><div id="opponent1">' + item1.media + '<div id="vote1">VOTE</div><div class="desciption-container"><h2 class="match-hed">' + item1.name + ' | <span style="font-family:SupriaSans-Regular">' + item1.when + '</span></h2><p class="match-text"><span style="color:red;font-family:SupriaSans-Bold">OFFENSE:</span> ' + item1.offense + '</p><p class="match-text"><span style="color:green;font-family:SupriaSans-Bold">OUTCOME:</span> ' + item1.outcome + '</p></div></div><div id="opponent2">' + item2.media + '<div id="vote2">VOTE</div><div class="desciption-container"><h2 class="match-hed">' + item2.name + ' | <span style="font-family:SupriaSans-Regular">' + item2.when + '</span></h2><p class="match-text"><span style="color:red;font-family:SupriaSans-Bold">OFFENSE:</span> ' + item2.offense + '</p><p class="match-text"><span style="color:green;font-family:SupriaSans-Bold">OUTCOME:</span> ' + item2.outcome + '</p></div></div></div>').append($('<div id="matchup-close">Close X</div>').click(function(){
     alert("Here");
     $(this).parent("#matchMenu").fadeOut("slow").remove();  
})).appendTo('#bracket-container').fadeIn("slow");
}

// This decides what to append
$(".matchup-container").click(function() {
for(var i=0; i<matchups.length; i++) {
    if(this.id == "matchup" + (matchups[i].match).toString()){
        createOpponentMenu(matchups[i].id1, matchups[i].id2);
    }
}
});
于 2012-10-05T17:04:33.997 に答える