jQuery 单选按钮 Onchange 不工作

Question

如果用户上传文件，它会调用createArray(data)函数然后显示单选按钮。之后，如果用户 select 一个单选按钮，它应该提醒用户选择哪个按钮，但 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 函数内。

Answer 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" />

Answer 2

请检查以下片段完美解决方案正是您想要的：

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

jQuery 单选按钮 Onchange 不工作

jQuery radio button Onchange is not working

javascript

jquery

onchange