javascript - 防止触发无线电输入的两个绑定事件中的第二个

Question

我有以下代码：

<form [attributes]>
  <input class="bound" type="radio" name="radioGroup" value="1" id="Radio1" />
  <label for="Radio1">One</label>

  <input class="bound" type="radio" name="radioGroup" value="2" id="Radio2" />
  <label for="Radio2">Two</label>

  <input type="submit" value="Submit" />
</form>

现在，这些东西被预先填充了——所以，如果用户登陆这个页面——可能会预先选择一个单选按钮。但是我希望即使单击单选按钮也能触发事件处理程序，所以我使用两个$.on()使用“单击”和“更改”：

<script type="text/javascript">
  $(function() {
    $(document.body).on('click', '.bound', function(event) {

      console.log( 'called click handler' );
      event.stopPropagation();

    });
    $(document.body).on('change', '.bound', function(event) {

      console.log( 'called change handler' );
      event.stopPropagation();

    });

  });
</script>

当您单击单选按钮时，它会触发这两个事件。我希望只有一个事件被解雇。是否有可能/可行的方法来实现这一目标？我认为event.stopPropagation()或event.stopImmediatePropagation()会工作，但似乎没有。

Answer 1

我认为您不需要 2 个事件处理程序。

$(function () {
    $(document.body).on('change', '.bound', function (event) {
        console.log('called change handler');
    });
    // fire it for pre-selected
    $('.bound:checked').change();
});

工作演示。

​</p>

Answer 2

您可能想使用 event.stopImmediatePropagation()

这将告诉 jQuery 不要触发任何剩余的订阅者。

http://api.jquery.com/event.stopImmediatePropagation/