單選按鈕更改事件無法正常啓動

Question

它應該相當簡單。我正在嘗試實現一個單選按鈕組。當點擊一個單選按鈕時，它將在下面附加一個文本「測試」，當點擊其他單選按鈕時，第一個單選按鈕上的文本將消失，第二個單選按鈕將在其上添加文本。此外，還有一個按鈕可動態添加單選按鈕，並將更改事件添加到該單選按鈕中。以下是我的代碼：

此代碼的問題是，當我單擊第二個單選按鈕時，第一個單選按鈕文本不會消失，並且當我檢查第三個單選按鈕時，第二個和第一個單選按鈕文本不會不會消失。

我該如何解決？

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>

Answer 1

移動

$('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>