CODEWITHSUNDEEP
jquerybuttonappend
user1310774
user1310774

Reputation: 41

Jquery append html and use on click of appended items to remove

I have a function that takes some data and generates an overlay window of sorts. This gets appended with a button to close the window. I can't figure out why though, the .click is never being fired (the alert never even happens) for close button. Here are the relevant functions.

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

Upvotes: 1

Views: 471

Answers (2)

prakashpoudel
prakashpoudel

Reputation: 577

General code :

##### 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>

For this question Please try this.

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

Upvotes: 0

wirey00
wirey00

Reputation: 33661

You need to use delegation as you are dynamically creating the element - the element must exist at the time of binding or else the event handler will never get attached to the element.

You are creating the elements on click - which I'm assuming you are binding the event handler on click of another element

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

});

By delegating you attach the event handler to a static parent element - and it listens for the event on the element and handles it when it bubbles up

Also depending on which jQuery version you are using

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

Upvotes: 1

Related Questions