事件未在附加的单选按钮上触发

Event not triggered on appended radio button

本文关键字：单选按钮 事件      更新时间：2023-09-26

我有一个带有一些单选按钮的表单。当我更改所选的单选按钮

时，这个脚本显示了一个警报
$('input[type=radio][name=shipping-h]').change(function () {
    alert("worked");
});

我有另一个脚本附加一个具有不同值的单选按钮

$( "#addressact" ).append('<input id=new-address type=radio name=shipping-h checked>')

如果我选择新的单选按钮，警告不起作用

如果你要添加一个新元素，你应该使用事件委托

$(document).on('change', 'input[name=shipping-h]', function() {
    alert("worked");
    $( "#addressact" ).append('<input id="new-address"  type="radio" name="shipping-h" checked/>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addressact">
  <input type="radio" name="shipping-h"/>
</div>

$(document).on('change', '.qwe', function() {
    if ($(this).is(":checked")) {
        alert("worked");
        $("#addressact").append("<input id='new-address' class='qwe'type='radio' name='shipping-h' />");
    }else{
        alert("not checked");
    }
});

新增类，仅供参考使用。

如果你要添加一个新元素，你应该使用事件委托。应该使用$(document).on('change', 'input[name=shipping-h]', function() {

附加事件只适用于该元素。如果你把元素附加在后面;您之前的代码(附加事件)不会神奇地再次执行。

这意味着在附加输入之后，您需要(再次)调用change()方法来将事件附加到输入。

进一步澄清;在当前的change()呼叫之前尝试alert($('input[type=radio][name=shipping-h]'));;可能会写undefined因为那个时候这个元素还不存在

您正在添加脚本，因此更改事件将不会绑定jquery。您需要执行以下步骤。

$( "#addressact" ).append('<input id=new-address onchange="changeevenfun();" type=radio name=shipping-h checked>')
function changeevenfun()
{
    alert("worked");
}
相关文章：