Question

我无法理解如何将click函数附加到附加部分内的元素。我查看了上一个问题的答案，但无法弄清楚是否将其应用到我的代码中。有人可以帮忙吗？我想要实现的目标：当用户点击新闻时，新闻Feed会切换。可以单击所看到的新闻部分以将当前切换移至新部分（音乐会）。

编辑：问题是'新闻Feed'在容器内。当用户单击菜单选项卡时，框切换1,2,3等将删除容器的内容（新闻订阅源）并将其替换为新添加的框切换。我试图让news1clone以同样的方式行事。删除内容（新闻Feed）并附加相应的框切换。

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

我建议使用jquery＆＃39; s＆＃39;方法而不是委托。这里的诀窍是设置正确的上下文。第一个选择器需要是页面加载时的元素，而不是ajaxed或稍后注入。尝试添加＆＃39;文档＆＃39;作为背景，它应该工作。

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

Answer 2

通常，您可以使用

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

您，您刚刚传递了一个选择器，该选择器与您要附加此功能的任何元素相匹配，并且与之兼容。

您还可以使用$(this)访问正在执行该功能的项目。

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

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

我认为click事件处理程序中的函数将对所有具有box-toggle2类的div执行。

委派点击功能到附加的div

2 个答案: