选择更改后，在新生的DOM元素上执行javascript

i have a problem on new elements created after select change event.

我对选择更改事件后创建的新元素有问题。

This is my HTML:

这是我的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 :

这是我的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:

这是隐藏元素的CSS：

.hide{
  display:none;
}

This is my fiddle:

这是我的小提琴：

CLICK HERE

点击这里

I'm trying to have the same control on new born elements.

我正试图对新生元素进行同样的控制。

For instance, when i switch my first select option, another select shows-up and so on.

例如，当我切换我的第一个选择选项时，另一个选择显示，依此类推。

This works perfectly on my first html element, but it doesn't work on the new borns.

这完全适用于我的第一个html元素，但它不适用于新版本。

Can you please help me?

你能帮我么？

Thank you!

谢谢！

4 个解决方案

#1

You also can use delegation like this too:

您也可以使用这样的委托：

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

#2

With your code, the event listener is registered only on the pre-existing select.

使用您的代码，事件侦听器仅在预先存在的选择中注册。

You can either register a new listener for the new select in the method that creates it or use a listener that is registered a the document level as already suggested in other comments.

您可以在创建它的方法中为新选择注册新侦听器，也可以使用已在其他注释中建议注册文档级别的侦听器。

#3

You can use event delegation, attaching the listener to a parent element (via JQuery selector or the document itself):

您可以使用事件委派，将侦听器附加到父元素（通过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");
});

#4

In your case you can avoid the event delegation because you may act differently.

在您的情况下，您可以避免事件委派，因为您可能采取不同的行动。

I suggest you to use clone(true): Create a deep copy of the set of matched elements preserving the event handlers.

我建议你使用clone（true）：创建保留事件处理程序的匹配元素集的深层副本。

In this way you will reduce your code.

这样您就可以减少代码。

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