Create new element with one button effectively
Question
i'm trying to create printable polaroid template, but i have a problem with some element, i have sticker container like this :
<div class="sticker-container">
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (1).gif"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (6).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (7).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (8).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (9).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (10).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (11).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (12).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (13).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (14).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (15).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (16).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (17).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (18).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (19).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (20).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (21).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (22).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (23).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (24).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (25).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (26).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-4/MermaidTropics (27).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (1).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (6).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (7).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (8).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (9).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (10).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (11).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (12).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (13).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (14).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (15).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (16).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (17).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (18).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (19).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (20).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (21).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (22).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (23).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (24).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (25).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (26).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (27).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (28).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (29).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (30).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (31).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (32).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (33).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (34).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (35).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (36).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (37).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (38).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (39).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (40).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (41).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (42).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (43).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (44).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (45).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (46).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (47).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (48).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (49).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-1/LuuCreativeColors (50).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/1.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/2.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/3.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/4.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/5.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/6.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/7.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/8.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/9.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/10.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/11.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/12.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/13.gif"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/14.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/15.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/16.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/17.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/18.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/19.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/20.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/21.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/22.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/23.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/24.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/25.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/26.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/27.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/28.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/29.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/30.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/31.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/32.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/33.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/34.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/35.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/36.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/37.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/38.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/39.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/40.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/41.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/42.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/43.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/44.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/45.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/46.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/47.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/48.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/49.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-2/50.png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (1).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (2).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (3).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (4).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (5).png"/></div>
<div class="sticker"><img src="ssts/img/overlay-3/Emoji Face by Waatt (6).png"/></div>
</div>
the screenshot of sticker container :
when i click the picture it will create new element to the polaroid-container , here :
My problem is, how to make its work ? i tried to use this code :
var counter = 0;
$('.sticker').on("click", function() {
$('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
$('.sticker-body').draggable({
containment: $('.polaroid')
});
});`
but it will only show one image that i write on .append() , how to make this effectively without create jquery each image ?
UPDATE
full page. As you can see with this code :
var counter = 0;
$('.sticker').on("click", function() {
$('.cutting-container').append("<div class='sticker-body'><img src='ssts/img/overlay-3/Emoji Face by Waatt (6).png'/></div>");
$('.sticker-body').draggable({
containment: $('.polaroid')
});
});
it will create new element on polaroid-container called sticker-body and it will come with image inside append() . I have class called sticker its for sticker image , what i want is when i click sticker class with ex: image-1 it will show image-1 and if its another sticker class it will show image-2
how do i create this more effectively without create jquery each id (*if i use id per class) ? So i should not create a lot of 'append()` code. Thanks
1 answers
solution1
1 ACCPTED 2017-03-24 07:53:25
If I understand your question correctly, you are having bunch of stickers that user can select from a template container and add them to another div.
Here is what I have done:
- I made a new object. So you are going to deal with a complete new object.
- I made it draggable.
var counter = 0; $('.sticker').on("click", function() { let $sticker = $($(this).html()); // use a cloned object in case you want to eliminate it. $('.cutting-container').append($sticker); $sticker.draggable({ containment: $('.polaroid') }); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Create new element according to number of clicks on a button
How to create a new html element on radio button change event?
Create new element with button and have content 'Table' | JQUERY
javascript - Create new <li> element with textarea onclick of button
Create a new element div and wrap it around an existing one with JavaScript
create new element inside element
create new element on xajax
Create Button Element in JavaScript
Create new element in cheerio
Create new element from selector?
Related Tags