My previous question (that was closed) -> Jquery - Cloning a div which includes input unordered lists. How to get the dropdown to work in the cloned row?
I was referred to this answer: -> Event binding on dynamically created elements?
I'm stuck at which static ancestor to use as with each one i try, the cloned version will not register any clicks.
For example, in my first version, I used the .on as so.. clicking an option from the dropdown to run a function that will assign a class selected, which will unhide the next dropdown.
$(".option").on("click", unhideoption2);
but with each parent/static selector I add in, it still doesn't register any clicks on the cloned versions
e.g
$(".optionlist").on("click", ".option", unhideoption2);
or
$(".cselect").on("click", ".option", unhideoption2);
or
$(".row1").on("click", ".option", unhideoption2);
Should I be adding the event delegation to the row that is being cloned instead of to the individual inputs? Although when I try that also, it still doesn't register the clicks on the cloned row.
$(".rows").on("click",'.clonerow', clonerow);
Where am I going wrong with the event delegation?
https://jsfiddle.net/pfhnr9uk/4/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rows">
<div class="row1">
<div class="cselect options1">
<input type="text" disabled placeholder="Select n1">
<ul class="optionlist">
<li class="option option1">Business</li>
<li class="option option2">Hair</li>
</ul>
</div>
<div class="cselect options2 hide">
<input type="text" disabled placeholder="new test">
<ul class="optionlist">
<li class="option option1">test</li>
<li class="option option2">option 2</li>
</ul>
</div>
</div>
<div class="row2">
<div class="cselect options3">
<input type="text" disabled placeholder="Select n2">
<ul class="optionlist">
<li class="option">Something</li>
<li class="option">Else</li>
</ul>
</div>
</div>
<div class="clonerow">
click me
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
/* ugly reset */
.cselect {
position: relative;
}
.cselect input {
background: #fff;
}
.cselect ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 1.2rem;
margin: 0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style: none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
.hide{
display:none;
}
JS
$(function() { // DOM ready
$(".cselect").each(function() {
var $input = $(this).find("input");
var $dropDown = $(this).find("ul");
$(this).on("click", function() {
$dropDown.stop().slideToggle();
});
$dropDown.on("click", "li", function() {
$input.val($(this).text());
});
});
});
var newnewid = 0;
var $cloneplayerclause = jQuery(".row1").clone(true);
function clonerow(){
newnewid++;
var $sectionClone = $cloneplayerclause.attr("id", newnewid).clone(true);
$('.rows').append($sectionClone);
}
function unhideoption2(){
$(".option").removeClass('selected');
$(this).addClass('selected');
if($('.option1').hasClass('selected')){
$('.options2').removeClass('hide');
}
}
$(".option").on("click", unhideoption2);
$(".clonerow").on("click", clonerow);
The events handlers are not cloned, but what you can do is create event handler on the .rows box like so:
$(function() { // DOM ready
const rows = $(".rows").on("click", function(e) {
if (e.target.tagName == "INPUT") {
const input = rows.find(e.target);
input.parent().find("ul").stop().slideToggle();
} else if (e.target.classList.contains("option")) {
const li = e.target;
const ul = li.parentNode;
const divSelect = ul.parentNode;
const row = divSelect.parentNode;
const input = divSelect.querySelector("input");
if (!divSelect.dataset.hidden)
row.dataset.hidden = li.dataset.hidden;
input.value = li.textContent;
$(input).click();
for(let i = 0; i < ul.children.length; i++)
{
ul.children[i].classList.toggle("selected", ul.children[i] === li);
}
const hiddenRows = row.querySelectorAll(".cselect[data-hidden]");
for(let i = 0; i < hiddenRows.length; i++)
{
hiddenRows[i].classList.toggle("hide", !row.dataset.hidden || row.dataset.hidden != hiddenRows[i].dataset.hidden);
}
}
});
});
var newnewid = 0;
var $cloneplayerclause = jQuery(".row1").clone(true);
function clonerow() {
newnewid++;
var $sectionClone = $cloneplayerclause.attr("id", newnewid).clone(true);
$('.rows').append($sectionClone);
}
$(".clonerow").on("click", clonerow);* {
margin: 0;
padding: 0;
}
/* ugly reset */
.cselect {
position: relative;
}
.cselect input {
background: #fff;
}
.cselect ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
top: 1.2rem;
margin: 0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style: none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rows">
<div class="row1">
<div class="cselect options1">
<input type="text" disabled placeholder="Select n1">
<ul>
<li class="option option1" data-hidden="1">Business</li>
<li class="option option2">Hair</li>
<li class="option option3" data-hidden="3">Face</li>
</ul>
</div>
<div class="cselect options2 hide" data-hidden="1">
<input type="text" disabled placeholder="new test">
<ul>
<li class="option option1">test</li>
<li class="option option2">option 2</li>
</ul>
</div>
<div class="cselect options2 hide" data-hidden="3">
<input type="text" disabled placeholder="face type">
<ul>
<li class="option option1">type 1</li>
<li class="option option2">type 2</li>
</ul>
</div>
</div>
<div class="row2">
<div class="cselect options3">
<input type="text" disabled placeholder="Select n2">
<ul>
<li class="option">Something</li>
<li class="option">Else</li>
</ul>
</div>
</div>
<div class="clonerow">
click me
</div>
</div>