Javascript 将单击功能委托给附加的div

我很难理解如何将单击函数附加到附加部分中的元素。我浏览了前面问题的答案，但不知道如何将其应用到我的代码中。有人能帮忙吗？我试图实现的目标是：当用户点击新闻时，新闻提要将关闭。可以单击看到的新闻部分以删除当前切换到新部分（音乐会）

编辑：问题是“新闻提要”在一个容器中。当用户单击菜单选项卡时，框切换1、2、3等将删除容器（新闻提要）的内容，并将其替换为新附加的框切换。我正试图让新闻频道以同样的方式运作。在内容（新闻提要）中删除并附加相应的框切换

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

$（“#新闻”）。单击（函数（）{
$（'.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'）。追加（''+
''+
“新闻”+
''+
''+
''+
''+
“2015年5月XX日”+
“打开
”+
“春季时尚派对”+
''+
''+
''+
''+
''+
''+
''+
“2015年5月28日”+
“创造者泰勒
”+
“Primavera声音音乐会”+
''+
''+
''+
''+
''+
''+
''+
“J.Cole，最新专辑”+
“2014森林丘陵大道
”+
'(2014)'+
''+
''+
''+
'');
$（'.place2'）.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'）。追加（''+
''+
''+
''+
''+
''+
''+
2015年5月24日，星期日+
“DMX音乐会
”+
''+
''+
''+
''+
''+
''+
''+
''+
2015年5月28日，星期四+
“创造者泰勒
”+
“普里马维拉湾”+
''+
''+
''+
'');
})
);
});

通常，您可以使用

$（“”）。单击（函数（）{}）

你，你只需要传递一个选择器，它匹配你想要附加这个函数的任何元素，并且它与它兼容

您还可以使用

$（this）

访问正在执行函数的项

例如，在具有名为“box-toggle2”的类的div中：

---

我认为click事件处理程序中的函数将对所有具有

box-toggle2

类的div执行。

我建议使用jquery的“on”方法而不是委托。这里的技巧是设置正确的上下文。第一个选择器需要是页面加载时存在的元素，而不是Ajax插入或稍后注入的元素。 尝试添加“文档”作为上下文，它应该可以工作

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

---

非常感谢弗朗西斯科！这解决了问题！如果在定义处理程序时DOM中不存在这些元素，则不会。这就是

click（函数（事件）{…}）之间的区别和
在（'click'，函数（事件）{…}）上
$(document).on('click','.news2clone',(function() {
// $(document) is your context and .news2clone would be the trigger inside that context.