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 版本

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // 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 回答