在一次克隆主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后面板颜色只改变一次

回答

相关问题