如何使更改事件适用于使用 replaceWith 添加的 html 的单选按钮

How to make change event work for radiobutton for html added with replaceWith

本文关键字：添加 replaceWith html 单选按钮 何使更 事件 适用于      更新时间：2023-09-26

我设法触发了单选按钮的更改事件。但是，我现在需要它适用于 html，其中单选按钮使用 replaceWith 添加到标记中。

因此，它被添加到我的标记中：

$(this).replaceWith('<input type="radio" name="variety" value="null" id="myradio" />');

因此，我用于捕获更改事件的代码是：

$('#myradio').change(function () {
        alert("Hello");
    });

那么有谁知道我将如何完成这项工作，因为单选按钮现在在初始页面加载后添加到页面中？

您可以使用

.on()（jQuery 1.7+）或.delegate()（jQuery 1.4.3+）来订阅更改事件，以便考虑动态添加的元素。

例如：

$('#myradio').live('change', handler);                // jQuery 1.3+
$(document).delegate('#myradio', 'change', handler);  // jQuery 1.4.3+
$(document).on('change', '#myradio', handler);        // jQuery 1.7+

同样重要的是要指出，没有必要将此订阅放在document.ready回调中。

您可以使用以下内容：

$（'body'）.on（'change'， '#myradio'， function （） {    警报（"你好"）;});

如果您事先知道要在其中放置单选按钮的元素，则应更改"body"选择器以匹配该元素的性能。

：

  • 使用 jQuery on 到父级

    <div id="container">
    <!--replaceable elements-->
</div>
//this will take effect on current and future children
$('#container').on('change','targetSelector',function(){
    alert("Hello");
});

  • 或直接绑定到新元素

    function func(){
    alert("Hello");
}
var newEl = $('<input type="radio" name="variety" value="null" id="myradiobutton" />');
newEl.change(func);
$(this).replaceWith(newEl);

不过，我更喜欢第一个，用于性能和干净的代码。

您可以创建单选按钮，添加更改事件，然后将this替换为单选按钮。

var $radio = $('<input type="radio" name="variety" value="null" id="myradio" />');
$radio.change(function () {
    alert("Hello");
});
$(this).replaceWith($radio);
相关文章：