添加动态元素onClick并使链接禁用,然后再次链接可点击删除它

时间:2016-12-04 21:05:11

标签: javascript jquery html css

我想用jQuery添加动态输入元素onClick并禁用链接。在删除我刚添加的输入元素时,我想再次点击链接。

screenshot

我做了第一部分添加元素并使链接禁用但问题是当我添加多个元素并尝试只删除一个元素时,所有其他链接都变为可点击。我知道,因为我给了课程下拉链接。不知道如何才能使这项工作正常进行。

这是我的代码:

$(document).ready(function() {
  $(".list").on('click', function() {
    $("#blockFeild").append(
      '<div class="row parent">' +
      '<div class="col-md-8">' +
      '<input class="form-control"  type="text">' +
      '</div>' +
      '<button class="btn btn-info" id="editbtn"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
      '<button class="btn btn-danger" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
      '<br><br>' +
      '</div>'
    ).show();
  });
});

$(document).on('click', 'a.list ', function() {
  $(this).addClass('no-click');
});

$(document).on('click', 'li.block', function() {
  $(this).addClass('not-allowed');
});

$(document).on("click", "#removebtn", function() {
  $(this).closest('.parent').remove();
  $(".block").removeClass("not-allowed");
  $(".list").removeClass("no-click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <?php $users_fields=$ this->db->list_fields('users'); for ($i=0; $i
    <count($users_fields); $i++){ ?>
      <li class="block">
        <a class="list" href="#">
          <?php echo $users_fields[$i]?>
        </a>
      </li>
      <?php } ?>
  </ul>
</div>

0 个答案:

没有答案