追加后的jQuery元素选择器

Posted 2023-05-09

【中文标题】追加后的jQuery元素选择器

【英文标题】：jQuery element selector after appends

【发布时间】：2016-03-18 13:29:58

【问题描述】：

我在追加后选择了我的元素。但我不能在点击功能内做任何事情。这是我的代码：

 <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.
            );


        )

【参考方案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();

【讨论】：

追加后它不起作用，你能告诉我如何在没有 div-2 的情况下定位所有目标吗？ . event.target 代码在追加后不起作用。