添加和删除单选按钮上的 onchange 侦听器 DOM

Question

我有 div，如果用户删除或添加它，可以将其添加到 DOM 或从中删除。第一次添加时，更改侦听器上的单选按钮会完美触发，但如果 div 被删除并重新添加，onChange 侦听器将不再有效。

HTML

<div id="div_container">
   <input type="radio" name="gender" value="m"/>
   <input type="radio" name="gender" value="f"/>
</div>

JS

$(document).on('change', 'input[type=radio][name=gender]', function(){
     alert();
});

有人知道如何解决这个问题吗？

Answer 1

我认为这应该可行。我用你的代码创建了 fiddle，它正在运行

 $(document).on('change', 'input[type=radio][name=gender]', function () {
        alert('hi');
    });

下面是fiddle link:

https://jsfiddle.net/shrawanlakhe/2ukjLfp0/7/

Answer 2

使用 function xxx(){} 和 .find

在事件中调用它们 "added" 单选按钮

var radios = '<input type="radio" name="gender" value="m"/>M<input type="radio" name="gender" value="f"/>F';

function onRchange(){
  
    $(document).find('input[type=radio][name=gender]').on('change', function(){
        alert($(this).val());
     });
  
  }

var i = true;

$('#add-r').on('click',function(){  
  if(i){
    
    $('#div_container').html(radios);
    $(this).html('REMOVE');
    i = false;
  }else{
    $(this).html('ADD');
    $('#div_container').html('');
     i = true;
  }
  
  onRchange();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="div_container">

</div>

<button id="add-r" >ADD</button>

添加和删除单选按钮上的 onchange 侦听器 DOM

Onchange listener on radio button that gets added and removed to DOM

javascript

jquery

dom

添加和删​​除单选按钮上的 onchange 侦听器 DOM

Onchange listener on radio button that gets added and removed to DOM

javascript

jquery

dom

添加和删除单选按钮上的 onchange 侦听器 DOM