Селектор элементов jQuery после добавления

Question

Я выбрал свои элементы после добавления. Но я не могу ничего сделать внутри функции щелчка. Вот мой код:

<div class="main"> 

    //content is here after appends 

</div> 

данных (Div-3 скрыт):

<ul class="data_list"> 
    <li class="row"> 

     <div class="div-1"> 
      Label 
     </div> 

     <div class="div-2"> 
      <span>Text</span> 
     </div> 

     <div class="div-3"> 
      <a class="edit"> 
       <i class="fa fa-edit"></i> 
      </a> 
     </div> 

    </li> 
    ... 

JQuery (Я хочу, чтобы показать Div-3 на MouseHover, а затем скрыть промежуток в div- 2, а затем создать вход или показать вход в Div-2, после чего я буду обновлять значение этого входа):

$(function(){ 

      $('.main').on('mouseover', '.data_list li', function() { 
       $(this).find('.div-3').show(); 

       $('.main ').on('mouseout', '.data_list li', function() { 
        $(this).find('.div-3').hide(); 

       }); 
      }); 
      $('.main').on('click', '.data_list .div-3 a', function() { 
       // I don't know what can I do here. 
       //I want to hide the span in div-2 and create a forminput instead. 
       //I tried $(".div-2 span").hide(); but didn't work. 
      }); 


     }) 

Answer 1

Вы можете выбрать класс, ASSIG Нед к этому «элемента»

$('.edit').on('click', function() { 
    //code to be executed 
} 

Я хотел бы построить вход в мой HTML, установить его как скрытый в вашем CSS, а затем показать его с помощью JQuery.

HTML

<div class="div-2"> 
    <span>Text</span> 
    <input class="list-input"> 
</div> 

CSS

.list-input { 
    display: none; 
} 

Jquery

$('.list-input').show();