单选按钮更改事件无法正常触发

时间:2017-07-02 20:58:48

标签: javascript jquery html

应该相当简单。我正在尝试实现一个单选按钮组。当点击一个单选按钮时,它将在下面附加文本“测试”,当点击其他单选按钮时,第一个单选按钮上的文本将消失,第二个单选按钮将附加文本。此外,还有一个动态添加单选按钮的按钮,并在该单选按钮中添加了更改事件。以下是我的代码:

这段代码的问题是,当我点击第二个radiobutton时,第一个radiobutton文本不会消失,当我检查第三个radiobutton时,第二个和第一个radiobutton文本不会消失。

我该如何解决?

function add() {

  var cat_name = $('input.text').val();
  $('div.radioGroup').append('<div><div><input type="radio" name="cat" value="' + cat_name + '"/> ' + cat_name + '<br /></div></div>');

  var inputDOM = $('input[value="' + cat_name + '"]');

  $('input:radio[name="cat"]').on('change', function() {
    // alert(cat_name);

    console.log("");
    console.log(cat_name);
    console.log(cat_name + " ischecked is " + $('input[value="' + cat_name + '"]').is(":checked"));

    if ($('input[value="' + cat_name + '"]').is(":checked")) {
      inputDOM.parent().after("<span style='margin-left:5em'>test</span><br>");
      // alert("yes is working");
    } else {
      // alert("uncheck is working!");
      console.log("uncheck is working");
      inputDOM.parent().nextAll().remove();

    }
  });


  $('input.text').val('');


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="radioGroup">

</div>
<input type="text" name="text" class="text">
<button onclick="add()">Add</button>

1 个答案:

答案 0 :(得分:0)

移动

$('input:radio[name="cat"]').on('change', function() { 

在add()之外并使用委托:

$('div.radioGroup').on("change",'radio[name="cat"]',function() {

可能是这样的。太晚猜猜你真正想要什么了

function add() {

  var cat_name = $('input.text').val();
  $('div.radioGroup').append('<div><div><input type="radio" name="cat" value="' + cat_name + '"/> ' + cat_name + '<br /></div></div>');
  $('input.text').val('');
}

$('div.radioGroup').on('change', 'input:radio[name="cat"]',function() {
  var cat_name=this.name, inputDOM = $('input[value="' + cat_name + '"]');
  console.log("");
  console.log(cat_name);
  console.log(cat_name + " ischecked is " + $('input[value="' + cat_name + '"]').is(":checked"));

  if ($('input[value="' + cat_name + '"]').is(":checked")) {
    inputDOM.parent().after("<span style='margin-left:5em'>test</span><br>");
    // alert("yes is working");
  } else {
    // alert("uncheck is working!");
    console.log("uncheck is working");
    inputDOM.parent().nextAll().remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="radioGroup">

</div>
<input type="text" name="text" class="text">
<button onclick="add()">Add</button>