Question

我设法让一个无线电按钮触发更改事件。但是我现在需要它用于html，其中radiobutton被添加到带有replaceWith的标记。

所以它被添加到我的标记中：

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

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

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

所以有人知道如果在初始页面加载后现在将单选按钮添加到页面中，我将如何完成这项工作？

Answer 1

您可以使用.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回调中。

Answer 2

您可以使用以下内容：

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

如果您事先知道要放置单选按钮的元素，则应更改“正文”选择器以匹配该元素以提高性能。

Answer 3

或者：

将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);

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

Answer 4

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

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

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

4 个答案: