委託單擊函數附加div

Question

我無法理解如何將附加單元添加到我的追加部分中的點擊功能。我查看了上一個問題的答案，但無法弄清楚將其應用於我的代碼。誰能幫忙？我試圖實現的是：當用戶點擊新聞時，新聞饋送切換下來。可以點擊看到的新聞部分，將當前切換到新的部分（音樂會）。

編輯：問題是'新聞提要'是在一個容器內。當用戶點擊一個菜單標籤時，box-toggle 1,2,3等將刪除容器的內容（新聞提要）並用新的附加框切換。我試圖讓news1clone以相同的方式行事。刪除內容（新聞提要）並附加相應的框切換。

$('#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的'on'方法而不是委託。這裏的訣竅是設置正確的上下文。第一個選擇器需要是一個頁面加載的元素，而不是在之後的Ajax或注入。 嘗試添加「文檔」作爲上下文，它應該工作。

$(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有一個名爲「盒子toggle2」類：

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

我覺得Click事件處理程序內的功能會爲所有具有box-toggle2類的div執行。