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的点击事件，因为fieldet被禁用了。

如果你以$(".editbutton")为起点，jQuery就会工作，虽然fieldet仍然被禁用。

这是预期的行为吗，有什么变通方法吗？我无法使用工作方案，因为表单是动态创建的。

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>