Jquery添加HTML並使用點擊附加項目刪除

我有一個函數，它需要一些數據並生成一個覆蓋窗口的排序。這會得到一個關閉窗口的按鈕。我無法弄清楚爲什麼，.click永遠不會被解僱（甚至從未發生過警報）關閉按鈕。這裏是相關的功能。Jquery添加HTML並使用點擊附加項目刪除

//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(); 
});

來源

2012-10-05 user1310774

你需要使用委派爲你動態創建的元素 - 元素必須結合，否則，事件處理程序將永遠不會附加到該元素的時間存在。

您正在創建點擊的元素 - 這我假設你是在另一個元素

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

});

的點擊綁定的事件處理程序通過委派你附加的事件處理程序的靜態父元素 - 它監聽的元素有關的事件並處理它時，它冒泡

還取決於哪個版本的jQuery您使用

$（選擇）.live（事件，數據，處理程序）; // jQuery 1.3+

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

$（document）.on（events，selector，data，handler）; // jQuery的1.7+

來源

2012-10-05 16:27:08

謝謝，這是有道理的。我在JS中做了很多這些東西的新手。 – user1310774

通用代碼：

##### 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-05 17:04:33 PRP

Jquery添加HTML並使用點擊附加項目刪除

回答

相關問題