0

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);
Daniel
  • 15
  • 4

2 Answers2

0

A basic example of how to do it.

The key is here:

function clonerow(){

        let cloneplayerclause = $(".row1").clone(false);

      let sectionClone = $(cloneplayerclause).attr("class", "rowx").find(".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());
        });

      });
      
      $('.rows').append(sectionClone);
      
      
    }

Complete example, try sample:

$(function(){


  $(".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());
    });

  });
  
  let cloneplayerclause = $(".row1").clone(false);
  
  window.cloneplayerclause = cloneplayerclause;

});


function clonerow(){

    let sectionClone = $("<div class='rowx' />")
    
    $(cloneplayerclause).clone(true, true).find(".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());
    });
    
    $(sectionClone).append(this);

  });
  
  $('.rows').append(sectionClone);
  
  $(".option").on("click", unhideoption2);
  
}

function unhideoption2(){
 $(".option").removeClass('selected');
 $(this).addClass('selected');
 if($(this).parent().parent().parent().find('.options1 ul li').hasClass("selected")){
 $(this).parent().parent().parent().find('.options2').removeClass('hide');
 }
 }

$(".option").on("click", unhideoption2);
$(".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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

    <head>
    
        <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    
    </head>
    
    <body>
    
        <div class="rows">
        <div class="row1">
          <div class="cselect options1">
            <input type="text" disabled placeholder="Select n1">
            <ul>
              <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>
              <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>
              <li class="option">Something</li>
              <li class="option">Else</li>
            </ul>
          </div>
        </div>
        <div class="clonerow">
        click me
        </div>
        </div>

        <script type="text/javascript" src="index.js"></script>

    </body>

</html>

I make the option part more dynamic in the function unhideoption2

if($(this).parent().parent().parent().find('.options1 ul li').hasClass("selected")){
 $(this).parent().parent().parent().find('.options2').removeClass('hide');
 }
Alumno Cabreado
  • 191
  • 8
  • thank you that works! Is there any way to have the cloned version appear like the original? By that I mean, the 2nd dropdown is only shown when the first option in dropdown 1 is selected, but if i select an option and the 2nd dropdown appears and then clone, the cloned version has the 2nd dropdown too when it should be hidden. Is this due to 'let cloneplayerclause = $(".row1").clone(false);' happening inside the function and after the click instead of being cloned beforehand? Thanks for the help – Daniel Jun 13 '21 at 17:25
  • The function called unhideoption2 has the key here, i was about 30 mins debugging, understand it now. – Alumno Cabreado Jun 13 '21 at 18:39
  • What would I need to change in that function? – Daniel Jun 13 '21 at 19:00
  • You need to change the selector because if you for example click in Hair option, you don't will unhide the element, i edit my post with this change on unhideoption2, the change is this -> ``if($('.option1, .option2').hasClass('selected')){`` – Alumno Cabreado Jun 14 '21 at 10:52
  • I beat the last part making the options more dynamic ```if($(this).parent().parent().parent().find('.options1 ul li').hasClass("selected")){ $(this).parent().parent().parent().find('.options2').removeClass('hide'); }``` – Alumno Cabreado Jun 14 '21 at 11:14
0

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>
vanowm
  • 9,466
  • 2
  • 21
  • 37
  • Hi Vanowm thank you for replying! I have made a js fiddle out of the answer, but it seems to not let you select an option. It clones correctly, but I can't click on 'Business' for example. Here is the jsfiddle -> https://jsfiddle.net/un2p8ox3/ – Daniel Jun 13 '21 at 17:31
  • fixed hidden row – vanowm Jun 13 '21 at 17:52
  • Hi Vanown, I will give you accepted answer. Just one further question.. In my original code, a 2nd dropdown appears when the 1st option 'Business' is selected. It seems this doesn't work in yours, I see you took out the function i used for it. Do you know what is causing that to not work? I want the 2nd dropdown to only appear after the first option is selected on dropdown 1 - the issue i was facing with this, was the cloned version didn't respond to the 1st option being selected, so the 2nd dropdown never appeared on the cloned row. thanks – Daniel Jun 13 '21 at 18:03
  • It's working in my version...unless I don't understand how it supposed to work...once "business" is selected in first dropdown it unhides the hidden field. Same thing happens in the cloned row – vanowm Jun 13 '21 at 18:11
  • I created this up to date jsfiddle, it works in the original row but in the cloned version it doesn't unhide the hidden field -> https://jsfiddle.net/un2p8ox3/1/ – Daniel Jun 13 '21 at 18:13
  • in my version hidden row has an additional class "hidden" and unhideoption2 function was merged into main event function. – vanowm Jun 13 '21 at 18:17
  • Hi yes, I get you now i missed that html part from my jsfiddle, sorry. I appreciate the help – Daniel Jun 13 '21 at 18:28
  • If I was to add more dropdowns, would I need to do an if statement on the div.classList.contains and then compare each class name? const hasHidden = div.classList.contains("options1") && div.parentNode.querySelector(".hidden"); – Daniel Jun 13 '21 at 18:38
  • Current implementation will only work with one hidden dropdown. If you want have multiple hidden dropdown that would be shown depending on which option selected it would need additional modification. – vanowm Jun 13 '21 at 18:44
  • updated the code (both html and js changed) It will now allow add multiple hidden fields and which hidden field belong to which option is controlled via 'data-hidden' attribute – vanowm Jun 13 '21 at 19:08
  • Would this work if the 3rd appeared depending on the 2nd dropdown not the 1st? i.e. could you show the 3rd dropdown depending on the 2nd dropdown option? – Daniel Jun 13 '21 at 19:35
  • Do you mean show more than one hidden dropdown in one row? - not with this method. – vanowm Jun 13 '21 at 20:25