jQuery добавленный элемент, который также выбирает родительский элемент

Question

У меня возникла проблема с использованием .on() к прилагаемым элементам.

Я пытаюсь выбрать и динамически создавать divs, которые могут быть выбраны, и добавить к ним div. Проблема, с которой я сталкиваюсь, заключается в том, что при выборе элемента dyanmic, который находится внутри элемента, который использует .on(), он также выбирает родителя. Я довольно новичок в jQuery, поэтому может быть совершенно лучшее решение.

<script type="text/javascript"> 
$(function() { 
    var wrapper = $('#wrapper'); 
    var add_row_button = $('#add_row');   

    var row_count = 0; 
    var selected_item = wrapper; 

    add_row_button.click(function() { 

     row_count++; 

     var new_element = '<div id="' + row_count + '">' + row_count + '</div>'; 

     selected_item.append(new_element); 

     $('#' + row_count).on("click", function() { 
      console.log(selected_item); 
      selected_item.removeClass("selected"); 
      selected_item = $(this); 
      selected_item.addClass("selected"); 
      console.log(selected_item); 
     }); 
    });   
});  

<button id="add_row">Add row</button> 
<div id="wrapper"></div> 

Answer 1

Вы не показали нам свой фактический HTML, но вот пример, который может работать для вас.

Идея делегированного управления событиями заключается в том, что вы прикрепляете обработчик событий к родительскому объекту, который является статическим (не приходит и не уходит). События на дочерних объектах затем пузырятся до родителя, а обработчик события jQuery на родительском объекте проверяет источник события, чтобы узнать, соответствует ли он выбранному селектору.

Так что, если ваш контейнер для этих динамически создаваемых событий был #container и каждый динамически создавать ребенок имел имя класса dynChild, вы можете подключить обработчик щелчка для всех детей, соответствующих что критерии с этим:

<div id="container"> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
</div> 

$('#container').on('click', '.dynChild', function() { 
    // handle click on a child here 
    // The this pointer will point to the element that was clicked on 
}); 

Затем вы можете добавлять/удалять соответствующие дочерние объекты, не изменяя обработку событий, и их события щелчка автоматически обрабатываются этим делегированным обработчиком событий на родительском объекте. Это один из самых мощных способов простого управления динамически создаваемыми/измененными страницами.

Answer 2

works!

$(function() { 

    //isolate code (optional) 
    (function() { 

     var wrapper = $('#wrapper'); 
     var addButton = $('#add_row'); 
     var row_count = 0; 
     var selectedItem; 

     //add a handler to the button 
     addButton.on('click', function() { 
      row_count++; 
      var new_element = $('<div></div>').attr('id', row_count).text(row_count); 
      wrapper.append(new_element); 
     }); 

     //add the handler to the parent for the new items 
     //so that we DON'T need to add a handler per new item basis 
     wrapper.on('click','div', function() { 
      if(typeof selectedItem !== 'undefined'){ 
       selectedItem.removeClass('selected'); 
      } 
      selectedItem = $(this); 
      selectedItem.addClass('selected'); 
     }); 
    }()); 
});​