Running javascript on new DOM parents after selecting change

Question

I am having a problem with new items created after selecting a change event.

This is my HTML:

<div class="cont-filtri">
  <div class="form-group uno">
    <label>Marca <span class="mandatory">*</span>:</label>
    <select name="brad" class="form-control" required>
      <option value="">Scegli</option>
      <option value="1">Yamaha</option>
    </select>
  </div>
  <div class="form-group due hide">
    <label>Modello <span class="mandatory">*</span>:</label>
    <select name="model" class="form-control" required disabled>
      <option value="">Scegli</option>
      <option value="1">Super bella</option>
    </select>
  </div>
  <div class="form-group tre hide">
    <label>Anno :</label>
    <select name="year" class="form-control" disabled>
      <option value="">Scegli</option>
      <option value="1">2017</option>
    </select>
  </div>
</div>
<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi filtro</button>

And this is my javascript:

$(".aggiungi-filtro").click(function(){
    $(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});
$(".uno select").on("change",function(){
    $(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change",function(){
    $(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});

Here is the css for hidden elements:

.hide{
  display:none;
}

This is my fiddle:

CLICK HERE

I am trying to have the same control over new elements.

For example, when I switch my first choice, another selects the ones shown, etc.

This works fine on my first html element, but it doesn't work on new born ones.

Can you help me?

Thank!

Answer 1

You can also use delegation as follows:

$(document).on("change", ".uno select", function(){
....
});

Answer 2

.

select , , , , .

Answer 3

, ( JQuery ):

$(document).on("click", ".aggiungi-filtro", function(){
    $(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});

$(document).on("change", ".uno select", function(){
    $(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".due").removeClass("hide");
});

$(document).on("change", ".due select", function(){
    $(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});

Answer 4

, -.

clone (true): , .

.

$(".aggiungi-filtro").click(function () {
    $(this).before('<hr/>')
       .before($('.cont-filtri:first').clone(true)
          .find('select.form-control').val('').end()
          .find(".form-group:gt(0)").addClass("hide").end());
});
$(".uno select").on("change", function () {
    $(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change", function () {
    $(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
    $(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="cont-filtri">
    <div class="form-group uno">
        <label>Marca <span class="mandatory">*</span>:</label>
        <select name="brad" class="form-control" required>
            <option value="">Scegli</option>
            <option value="1">Yamaha</option>
        </select>
    </div>
    <div class="form-group due hide">
        <label>Modello <span class="mandatory">*</span>:</label>
        <select name="model" class="form-control" required disabled>
            <option value="">Scegli</option>
            <option value="1">Super bella</option>
        </select>
    </div>
    <div class="form-group tre hide">
        <label>Anno :</label>
        <select name="year" class="form-control" disabled>
            <option value="">Scegli</option>
            <option value="1">2017</option>
        </select>
    </div>
</div>

<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi
    filtro
</button>

Hide result