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不会捕获单击editbutton的事件。

如果您以$（“。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>