追加后的jQuery元素选择器

Question

我选择了追加后的元素。但是我不能在click函数中做任何事情。下面是我的代码：

 <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，然后在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

您可以选择分配给该'a‘元素的类

$('.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();