jQuery on() 不适用于禁用字段集中的元素

Question

<form>
  <fieldset disabled='disabled'>
    <input type='text' name='text' value='not to be edited' />
    <a href='#' class='editbutton'>click me</a>
  </fieldset>
</form>

jQuery 不工作：

$("body").on("click", ".editbutton", function(e) {
  e.preventDefault();
  console.log("hello");
});

jQuery 工作：

$(".editbutton").on("click", function(e) {
  e.preventDefault();
  console.log("hello");
});

所以，当你以 $("body") 为起点时，jQuery 不会捕捉到点击编辑按钮的事件，因为 fieldset 被禁用。

如果你以 $(".editbutton") 作为起点，jQuery 可以工作，尽管 fieldset 仍然被禁用。

这是预期的行为吗？是否有解决方法？我无法使用有效的解决方案，因为表单是动态创建的。

Answer 1

您的代码完全有效，因此必须有额外的 JS 搞砸了您的逻辑。

$('.js-button').on('click', function() {
  $('.js-copy').eq(0).clone().appendTo('body');
});


$("body").on("click", ".editbutton", function(e) {
  e.preventDefault();
  console.log("hello");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="js-button"> copy form </button>
<form class="js-copy">
  <fieldset disabled='disabled'>
    <input type='text' name='text' value='not to be edited' />
    <a href='#' class='editbutton'>click me</a>
  </fieldset>
</form>