在一次克隆主div後面板顏色只改變一次

這裏我試圖克隆一個<div class="main"，我需要改變這個父母的顏色div。但它一次只改變一次(only first panel)之後克隆。也克隆按鈕點擊重複多次，而我需要在每次點擊按鈕時只克隆一次。有人可以幫我解決這個問題嗎？在一次克隆主div後面板顏色只改變一次

下面是代碼鏈接：https://jsfiddle.net/Issact/k69pxad9/

<div class="body"> 
<div class="main"> 
<div class="inner"> 
<div class="content"> 
This is a test content 
</div> 
</div> 
<button type="button" class="ChangeColor"> 
Change color 
</button> 
</div> 

<Button type="button" class="clickButton"> 
Click on button 
</Button> 
</div>

CSS：

.main { 
    background-color:#000; 
    color:#fff; 
    font-size:18px; 
    padding-bottom:15px; 
    padding-left:15px; 
} 
.inner { 
    padding:15px; 
}

JS：

$(document).ready(function(){ 

$('.clickButton').click(function(){ 
$('.main').clone().appendTo('.body'); 
}); 

$('.ChangeColor').click(function(){ 
$(this).parent('.main').css({backgroundColor: 'green'}); 
}); 

});

來源

2017-07-03 Devbuddy

https://jsfiddle.net/satpalsingh/2xaetwfp/ – Satpal

使用委託點擊事件動態創建的元素，請在下面找到樣本爲你案件。

我會建議使用下面.on是.on功能的簽名

$(document).on(eventName, selector, function(){}); 

$("body").on("click", "#YOUR_DYNAMICALLY_CREATED_ELEMENT", function(event){ 
    //Do Some stuff 
}); 


// Your case it would be like below 
$(document).on('click','.ChangeColor',function(){ 
    $(this).parent('.main').css({backgroundColor: 'green'}); 
});

FIDDLE

來源

2017-07-03 10:27:05 Curiousdev

$('.clickButton').click(function(){ 
    $('.main').clone().appendTo('.body'); 
    $('.ChangeColor').click(function(){ 
    $(this).parent(".main").css({backgroundColor: 'green'}); 
    }); 
});

您嘗試添加一個事件，在創建節點之前。

來源

2017-07-03 10:29:52 Rakowu

添加與eq(0)。其克隆只有一個主要元素。而改變與on()。因爲ChangeColor點擊功能動態地添加元素不工作正常點擊

$(document).ready(function() { 
 

 
    $('.clickButton').click(function() { 
 
    $('.main').eq(0).clone().appendTo('.body'); 
 
    }); 
 

 
    $(document).on('click','.ChangeColor',function() { 
 
    $(this).parent('.main').css({ 
 
     backgroundColor: 'green' 
 
    }); 
 
    }); 
 

 
});

.main { 
 
    background-color: #000; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    padding-bottom: 15px; 
 
    padding-left: 15px; 
 
} 
 

 
.inner { 
 
    padding: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="body"> 
 
    <div class="main"> 
 
    <div class="inner"> 
 
     <div class="content"> 
 
     This is a test content 
 
     </div> 
 
    </div> 
 
    <button type="button" class="ChangeColor"> 
 
Change color 
 
</button> 
 
    </div> 
 

 
    <Button type="button" class="clickButton"> 
 
Click on button 
 
</Button> 
 
</div>

來源

2017-07-03 10:30:33 prasanth

既然你動態創建您的.main元素，您使用的JavaScript代碼將不起作用（因爲這些元素尚未創建）&您需要使用「事件委託」方法使其工作。

$('.body').on('click', '.ChangeColor', function() { 
    $(this).parent('.main').css({backgroundColor: 'green'}); 
});

說明：

，而不是直接結合「點擊」事件處理程序動態創建元素（.ChangeColor），可以改爲將其綁定到一個父元素（.body或<body>或document） & 注意更換/添加新的子元素。

瞭解更多關於代表團here

來源

2017-07-03 10:30:58

這是因爲通過.clone()創建的元素不綁定處理程序。

使用

$('.body').on('click', '.clickButton', function(){ 
    $('.main').clone().appendTo('.body'); 
});

解決它

來源

2017-07-03 10:32:10

在一次克隆主div後面板顏色只改變一次

回答

相關問題