将click函数委托给附加的div

Question

I am having trouble understanding how to attach a click function to an element inside my appended portion. I looked through the answers of previous question but can't figure out out to apply it to my code. Can anyone help? What I am trying to achieve: When the user clicks on news, a news feed toggles down. The sections of news seen can be clicked to remove the current toggle into a new section (concerts).

edit: The problem is that the 'news feed' is inside a container. When the user clicks a menu tab either box-toggle 1,2,3, etc will remove the contents of the container (news feed) and replace it with the new appended box-toggle. Im trying to get the news1clone to act in the same manner. Deleting in the contents (news feed) and appending the appropriate box toggle.

 $('#news').click(function() {
     $('.nav li').removeClass('active');    
        $(this).addClass('active');
    $('.box-toggle').remove();
    $('.box-toggleclone').remove();
    $('.box-toggle1').remove();
    $('.box-toggle2').remove();
    $('.box-toggle3').remove();
    $('#box').removeClass('box-zoom');
    $('#box').addClass('box-reg');
    $('.placer2').append('<div class = "box-toggleclone">'+
        '<div class = "newsbodyclone">'+
        '<div class = "newsheaderclone"><h1>News</h1></div>'+
        '<div class = "news1clone">'+
                    '<div class = "news1clone-photo">'+
                    '</div>'+
                    '<div class = "news1clone-info">'+
                        '<p>MAY XX, 2015</p>'+
                        '<h2>OPENING<br>'+
                        'SPRING FASHION PARTY<h2>'+
                    '</div>'+
        '</div>'+
           '<div class = "news2clone">'+
                    '<div class = "news2clone-photo">'+
                    '<img src="album-cover/tyler.jpg" alt = "photo-carosel">'+
                    '</div>'+
                    '<div class = "news2clone-info">'+
                        '<p>MAY 28, 2015</p>'+
                        '<h2>TYLER THE CREATOR<br>'+
                        'Primavera Sound Concert<h2>'+
                    '</div>'+
        '</div>'+
           '<div class = "news3clone">'+
                    '<div class = "news3clone-photo">'+
                    '<img src="album-cover/jcole.jpg" alt = "photo-carosel">'+
                    '</div>'+
                    '<div class = "news3clone-info">'+
                        '<p>J. Cole, Latest album</p>'+
                        '<h2>2014 Forest Hills Drive<br>'+
                        '(2014)<h2>'+
                    '</div>'+
            '</div>'+
        '</div>'+
        '</div>');
$('.placer2').delegate('click','.news2clone',(function() {
         $('.box-toggle').remove();
        $('.box-toggleclone').remove();
        $('.box-toggle1').remove();
        $('.box-toggle2').remove();
        $('.box-toggle3').remove();
        $('#box').removeClass('box-zoom');
        $('#box').addClass('box-reg');
        $('.placer2').append('<div class = "box-toggle2">'+
            '<div class = "concert-body">'+
            '<div class = "concert1">'+
                        '<div class = "concert1-photo">'+
                        '<img src="album-cover/dmx.jpg" alt = "photo-carosel">'+
                        '</div>'+
                        '<div class = "concert1-info">'+
                            '<p>Sunday, May 24 2015</p>'+
                            '<h2>DMX CONCERT<br>'+
                            '<h2>'+
                        '</div>'+
                '</div>'+
                  '<div class = "concert2">'+
                        '<div class = "concert2-photo">'+
                        '<img src="album-cover/tyler.jpg" alt = "photo-carosel">'+
                        '</div>'+
                        '<div class = "concert2-info">'+
                            '<p>Thursday, May 28 2015</p>'+
                            '<h2>TYLER THE CREATOR<br>'+
                            'Primavera Sound<h2>'+
                        '</div>'+
                '</div>'+
            '</div>'+
            '</div>');
          })
        );
          });

Answer 1

I would recommend using jquery's 'on' method instead of delegate. The trick here is setting the correct context. The first selector needs to be an element that is there on page load and not ajaxed in or injected later. Try adding the 'document' as the context and it should work.

$(document).on('click','.news2clone',(function() {
// $(document) is your context and .news2clone would be the trigger inside that context.

Answer 2

Generally, you could use

$('<YOUR CSS SELECTOR HERE>').click(function(){<THE CODE THAT YOU WANT TO EXECUTE HERE>}) .

You, you just have pass a selector that matches against any element that you want to attach this function and it is compatible with it.

You can also access the item that is executing the function with $(this) .

For example, in your div that has a class named "box-toggle2":

$('div.box-toggle2').click(function(){
    $(this).hide(); // JUST AS AN EXAMPLE, I'M TRYING TO HIDE THIS DIV.
});

I think that function within the click event handler will execute for all the divs that have the box-toggle2 class.