时间戳

首页 > 解决方案 > jquery 不能使用动态添加的元素

javascript - jquery 不能使用动态添加的元素

问题描述

在我的 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() 根本没有响应。我把它放在文件里面和外面准备好或者不起作用。

标签： javascriptjqueryradio-button

解决方案

因为它们是动态添加的，所以您的选择器不会拾取它们，因为您的选择器基本上已经查询了 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();       
 })

推荐阅读