jquery 不能使用动态添加的元素答案

【问题标题】：jquery not working with dynamically added elementsjquery 不能使用动态添加的元素
【发布时间】：2020-11-23 03:35:00
【问题描述】：

在我的 HTML 正文中，我有以下代码：

$.post('/GetManufacturers',(Data)=> {
  Data.Manufacturers.forEach(i => {
    $('#Manufacturers').append(`<input type="radio" name="Manufacturers" id="MF" value="${i}"> <label>${i}</label><br>`);   
  });
});

$('input[name="Manufacturers"]').change(()=>{
  console.log($("input[type='radio'][name='Manufacturers']:checked").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Manufacturers:</label>
<div id="Manufacturers"></div>

它完美地添加了单选按钮并且它们工作正常，但是当我选择一个单选按钮时 .change() 根本没有响应。我把它放在文档里面和外面准备好或者不起作用。

【问题讨论】：

标签： javascript jquery radio-button

【解决方案1】：

因为它们是动态添加的，所以您的选择器不会拾取它们，因为您的选择器基本上已经查询了 dom。

你必须改变

 $('input[name="Manufacturers"]').change(()=>{        
    console.log($("input[type='radio'][name='Manufacturers']:checked").val());       
 })

到

 $('body').on('change', 'input[name="Manufacturers"]', () => {        
    console.log($("input[type='radio'][name='Manufacturers']:checked").val();       
 })

【讨论】：

$('body').on('change', 'input[name="Manufacturers"]', () => { console.log($("input[type='radio'][name='Manufacturers']:checked").val(); }) 试试看。

【解决方案2】：

在这种情况下，您应该在 JQuery 中使用 Event Delegation。

加载内容后添加元素。

一开始，您尝试将事件绑定到页面中没有任何元素的选择器。

const mockUrl = 'https://run.mocky.io/v3/48c668b0-291c-4704-b5ed-c14f5038b2c9'

$(() => {
  $.post(mockUrl, (Data) => {
    Data.Manufacturers.forEach(i => {
      $('#Manufacturers').append(`<input type="radio" id="${i}" name="Manufacturers" id="MF" value="${i}"> <label for="${i}">${i}</label><br>`)
    });
  })
})

$("body").on("change",'input[name="Manufacturers"]',() => {
  console.log($("input[type='radio'][name='Manufacturers']:checked").val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <label>Manufacturers:</label>
  <div id="Manufacturers"></div>
</body>

【讨论】：