jquery не работает при добавлении нового div

Question

У меня есть некоторый элемент в div, используя их класс У меня есть определенный jquery. Когда я добавляю (добавляет) новый div с тем же классом, jquery не работает.

В нижеследующих фрагментах элементы под «старыми» жестко закодированы, а jquery отлично работает, но элементы под «новым» добавляются и один и тот же jquery не работает.

$(".ele").on("click", function() { 
 
    $(this).hide(); 
 
}); 
 
$("#more").on("click", function() { 
 
    $("<div class='ele'></div>").appendTo("#all"); 
 
});

.ele { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 10px; 
 
    background-color: #bbb; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="more" style="cursor: pointer">click to add box</div> 
 
<br/> 
 
<div id="all"> 
 
    <div>Instruction: click the boxes to hide</div> 
 
    <div>Old Elements:</div> 
 
    <div class="ele"></div> 
 
    <div class="ele"></div> 
 
    <div class="ele"></div> 
 
    <br/> 
 
    <br/> 
 
    <div>New Elements:</div> 
 
</div>

Я хочу добавить DIV с таким же классом, на котором предопределенный JQuery будет работать. Пожалуйста, помогите.

Answer 1

Ваш подход был близок к работе, но если элемент генерируется динамически, вы должны вызвать уже существующего родителя и поместить целевой элемент в функцию on() ... иначе он не будет распознан.

для лучшего объяснения, см: http://api.jquery.com/on/

$("#all").on("click",".ele", function() { 
 
    $(this).hide(); 
 
}); 
 
$("#more").on("click", function() { 
 
    $("<div class='ele'></div>").appendTo("#all"); 
 
});

.ele { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 10px; 
 
    background-color: #bbb; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="more" style="cursor: pointer">click to add box</div> 
 
<br/> 
 
<div id="all"> 
 
    <div>Instruction: click the boxes to hide</div> 
 
    <div>Old Elements:</div> 
 
    <div class="ele"></div> 
 
    <div class="ele"></div> 
 
    <div class="ele"></div> 
 
    <br/> 
 
    <br/> 
 
    <div>New Elements:</div> 
 
</div>