Question

我有一个奇怪的问题，一个函数绑定到无线电输入上的点击事件，然后在另一个点击事件触发时选中单选按钮。这样看起来有点令人困惑，所以这里看一下代码：

<div class="side">
    <input type="radio" id="100" value="100" name="radiogroup" style="display:none;" />
    <label for="100">
        <img src="" />
        <span>Description</span>
    </label>
</div>

大多数浏览器都支持点击标签来触发无线电输入的选择，但IE当然不支持。因此我在html上使用条件类，例如

<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->

这样可以轻松创建IE特定的javascript。在这种情况下，我需要在点击标签时模拟单击无线电输入，我喜欢这样：

$(".lt-ie9 .side label").bind("click", function() {
    $(this).siblings("input").click();
});

到目前为止，一切正常。当我尝试在单击无线电输入时插入AJAX调用时会出现问题，如下所示：

$("input[name=radiogroup]").bind("click", function() {
    //some ajax call referencing which radio option is selected.
});

我遇到的问题是ajax方法在无线电输入实际切换到最新选择之前被解雇了。所以例如，如果我有多个无线电输入，比如id /值为“100”，“101”，“102”等。如果我点击100，那么我点击101，ajax调用正在使用的值100而不是最近点击的101值。任何人都知道为什么会发生这种情况？在我看来，在检查最新的单选按钮之前不应该调用ajax方法。希望这一切都有意义。

Answer 1

通过将绑定切换为“更改”而不是“点击”，它有点起作用，但是IE仍然存在问题。我通过调用$（this）.siblings（“input”）来解决这个问题.Click（）。change（）;

Answer 2

IE无法使用display：none来点击标签上的点击;但是，你可以通过触发隐藏元素（或click事件）上的change事件来绕过它（类似于你所拥有的）;您的标记也存在问题。

我修改了你的标记来修复一个不能以数字开头的ID并添加了稍微修改过的代码 - 比你的解决方案更模块化了吗？

<div class="side">
    <input type="radio" id="my100" value="100" name="radiogroup" style="display:none;" />
    <label id='my100label' for="my100">
        <img src="" />
        <span>Description</span>
    </label>
</div>

代码，使用新的id：

$('.side').on('click','#my100label',function(){
  $('#my100').prop('checked',true).trigger('change');
});
$('#my100').on('change',function(){
  alert('Howdy I am:'+ $(this).prop('checked'));
});

注意：您可以删除.prop()代码并简单地触发“点击”事件，但是，在更改/点击收音机内的第一时间道具将是假的（尚未更改/点击） - 是如果你走那条路，一定要注意这一点。在这种情况下监视更改事件会更好，因为您将无法手动“单击”该元素，并且由于其隐藏的性质，需要使用代码更改/单击它 - 如果在表单内部，则不会提交。

注意：在这里使用jQuery 1.9.1和IE8测试了这段代码：http://jsbin.com/ocisul/1/edit

IE8及以下的jQuery .click（）ajax问题

2 个答案: