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

Question

我设法让单选按钮的更改事件触发。但是我现在需要它来处理 html，其中单选按钮通过 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+) 订阅 change 事件，以考虑动态添加的元素。

例如：

$('#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 () {
    警报（“你好”）；
});

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

Answer 3

任何一个：

• on对父母使用 jQuery

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