Question

我有一个脚本可以禁用与类＃34;禁用＆＃34;

的链接

//disabled links
$(document).ready(function() {
   $(".disabled a").click(function() {
     return false;
   });
});

另外，我有一个脚本，当＆＃34; .edit＆＃34;单击按钮可切换其自身形式的输入的禁用状态。它还在表单中的任何匹配链接上执行removeClass（＆＃39;禁用＆＃39;）。

//toggle form edit
$("#edit").click(function(e) {
  e.preventDefault();
  $(this).closest("form").find("input").prop('disabled',false);
  $(this).closest("form").find(".input-group-addon").removeClass('disabled');
  $("#save").prop('disabled',false);
  $("#edit").prop('disabled',true);
  $(".alert").hide(400, "swing");
});

然后有一个添加和删除输入字段的脚本

//add input fields
$(".form-group").on('click', 'a.addInput', function() {
  var original = $(this).closest(".input-group");
  original.clone().insertAfter(original);
});

//remove input fields
$(".form-group").on('click', 'a.deleteInput', function() {
  var original = $(this).closest(".input-group");
  if($(this).closest(".form-group").children(".input-group").length > 1) {
    original.remove();
  }
});

HTML：

<form class="edit">
  <div class="panel">
    <div class="panel-heading">
      <span><i class="fa fa-user" aria-hidden="true"></i> Basic Information</span>
      <span class="pull-right"><input id="save" class="btn btn-success" type="submit" value="Save" disabled></span>
      <span class="pull-right"><button id="edit" class="btn btn-default">Edit</button></span>
    </div>
    <div class="panel-body">
      <div class="form-group">
        <label for="email">Email</label>
        <div class="input-group">
          <input type="email" class="form-control" placeholder="Email" name="email" value="engelo@dingosoft.us" disabled required>
          <div class="input-group-addon disabled"><a href="#" class="addInput text-success"><span class="fa fa-plus"></span></a></div>
          <div class="input-group-addon disabled"><a href="#" class="deleteInput text-danger"><span class="fa fa-minus"></span></a></div>
        </div>
      </div>
      <div class="form-group">
        <label for="phone">Phone</label>
        <div class="input-group">
          <input type="tel" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="Format: 555-555-5555" name="phone" value="419-555-1212" disabled required>
          <div class="input-group-addon disabled"><a href="#" class="addInput text-success"><span class="fa fa-plus"></span></a></div>
          <div class="input-group-addon disabled"><a href="#" class="deleteInput text-danger"><span class="fa fa-minus"></span></a></div>
        </div>
      </div>
    </div>
  </div>
</form>

我遇到的问题是当班级＆＃34;禁用＆＃34;已从链接中移除，链接（＆＃39; a.addInput＆＃39;）＆amp; （＆＃39; a.deleteInput＆＃39;）不起作用。我在这里缺少什么？

Answer 1

点击处理程序已附加到元素，而不是选择器。所以当你这样做时：

$(".disabled a").click(function() {
    return false;
});

您正在将该行为分配给当时与匹配的所有元素（在这种情况下，文档加载时）。无论你事后对DOM做了什么改变，当你调用上面的代码时匹配的任何元素仍然会有上面的点击处理程序。

这里的一种方法是将点击处理程序分配给公共不变的父级，而不是元素本身。通过以这种方式使用.on()，您可以在单击事件发生时动态评估选择器，而不是在页面加载时评估一次。像这样：

$(document).on("click", ".disabled a", function() {
    return false;
});

然后每次点击都会评估第二个选择器（".disabled a"）。因此，如果DOM已更改，使得元素不再与该选择器匹配，则不会使用此单击处理程序。

Answer 2

您需要添加阻止事件。

$(".form-group").on('click', 'a.addInput', function(e) {
e.preventDefault();
  var original = $(this).closest(".input-group");
  original.clone().insertAfter(original);
});

//remove input fields
$(".form-group").on('click', 'a.deleteInput', function(e) {
e.preventDefault();
  var original = $(this).closest(".input-group");
  if($(this).closest(".form-group").children(".input-group").length > 1) {
    original.remove();
  }
});

或者您可以将href="javascript:void(0);"添加到addInput和deleteInput。

我希望实现你的目标会有所帮助......

removeClass后，jquery链接无法正常工作（＆＃39;禁用＆＃39;）

2 个答案: