追加后的jQuery元素选择器

时间:2015-12-12 19:08:45

标签: jquery ajax jquery-selectors selector

我追加后选择了我的元素。但是我无法在点击功能中做任何事情。这是我的代码:

 <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(我想在mousehover上显示div-3,然后在div-2中隐藏span,然后在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 个答案:

答案 0 :(得分:0)

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

<button><a ng-click="upload()">Submit</a></button>

我会将输入构建到我的html中,将其设置为隐藏在css中,然后使用jquery显示它。

<强> HTML

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

<强> CSS

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

<强> JQUERY

.list-input {
   display: none;
}