[英]click through overlay div to canvas with delegating click event over coordinates
[英]Delegating click function to appended div
我在理解如何將單擊功能附加到附加部分內的元素時遇到了麻煩。 我瀏覽了上一個問題的答案,但無法弄清楚將其應用於我的代碼。 有人可以幫忙嗎? 我要實現的目標:當用戶單擊新聞時,新聞提要向下切換。 可以單擊看到的新聞部分以將當前切換切換到新部分(音樂會)。
編輯:問題是“新聞提要”在容器內。 當用戶單擊菜單選項卡時,無論是按框切換的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>');
})
);
});
我建議使用jquery的“ on”方法代替委托。 這里的竅門是設置正確的上下文。 第一個選擇器必須是頁面加載時存在的元素,並且以后不被取消或注入。 嘗試添加“文檔”作為上下文,它應該可以工作。
$(document).on('click','.news2clone',(function() {
// $(document) is your context and .news2clone would be the trigger inside that context.
通常,您可以使用
$('<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執行。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.