Question

我有一个函数可以获取一些数据并生成各种覆盖窗口。这会附加一个关闭窗口的按钮。我无法弄清楚为什么，但.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();
});

Answer 1

您需要在动态创建元素时使用委托 - 元素必须在绑定时存在，否则事件处理程序永远不会附加到元素。

您正在点击创建元素 - 我假设您在点击其他元素时绑定事件处理程序

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

});

通过委托将事件处理程序附加到静态父元素 - 它会侦听元素上的事件并在它冒泡时处理它

还取决于您使用的jQuery版本

$（selector）.live（events，data，handler）; // jQuery 1.3 +

$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3 +

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7 +

Answer 2

一般代码：

##### 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);
    }
}
});

Jquery附加html并在点击附加项目时使用以删除

2 个答案: