jQuery单选按钮Onchange不起作用答案

【问题标题】：jQuery radio button Onchange is not workingjQuery单选按钮Onchange不起作用
【发布时间】：2019-11-13 14:19:06
【问题描述】：

如果用户上传文件，它将调用createArray(data) 函数然后显示单选按钮。之后，如果用户选择了一个单选按钮，它会提醒用户选择了哪个按钮，但onchange 功能不起作用TT。我尝试了几种不同的方法，但它不起作用。

我的单选按钮是 var 字符串格式并使用 .innerHTML。

function createArray(data) {
  if (data !== null && data !== "" && data.length > 1) {
    this.CSVdata = data;
    document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records!";
    var radioHtml = "<div style='padding: 15px; width:100; height: 300;'><br>";
    radioHtml += "<form id='mybutton'>"
    radioHtml += "<p><b>Please select one of the following choice, and run one of the graph in the View menu</b></p><br>"
    radioHtml += "<input type='radio' name='radiobut' id ='avgwages'/> AvgWages (Bar, Line) <br> "
    radioHtml += "<input type='radio' name='radiobut' id ='estpopulation'/> EstimatedPopulation (Bar, Line)<br>"
    radioHtml += " <input type='radio' name='radiobut' id ='state'/> State (Bar, Pie,Line) <br>";
    radioHtml += "</form>";
    radioHtml += "</div>";
    document.getElementById("dataselection").innerHTML = radioHtml;
  } else {
    document.getElementById("message").innerHTML = " Cannot upload File!";
  }
};

$("#mybutton").on('change', 'input[name=radiobut]:checked', function() {
  alert("change");
});

两者都在 document.ready 函数内。

【问题讨论】：

删除:checked
我已删除但仍无法正常工作
在小提琴中添加代码

标签： javascript jquery onchange

【解决方案1】：

当您动态添加元素时，您需要像下面这样全局处理它的事件。

$(document).on('change','#mybutton',function(){
        alert("change");
    });

如果您使用id 管理change 事件，则无需在change 事件函数中传递其他参数。

尝试以下解决方案。

$("#mybutton").on('change',function(){
        alert("change");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="mybutton" />

【讨论】：

【解决方案2】：

请检查以下sn-p完美解决方案正是你想要的：

(function() {
   $('input[type=radio][name=radiobut]').change(function() {
           alert("Changed: " + this.id);//selected radio ID
    });
})();

(function() {
   $('input[type=radio][name=radiobut]').change(function() {
		   alert("Changed: " + this.id);//selected radio ID
	});
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='padding: 15px; width:100; height: 300;'><br>
<form id='mybutton'>
<p><b>Please select one of the following choice, and run one of the graph in the View menu</b></p><br>
<input type='radio' name='radiobut' id ='avgwages'/> AvgWages (Bar, Line) <br> 
<input type='radio' name='radiobut' id ='estpopulation'/> EstimatedPopulation (Bar, Line)<br>
<input type='radio' name='radiobut' id ='state'/> State (Bar, Pie,Line) <br>
</form>
</div>

【讨论】：