0

我有一个奇怪的问题，即在另一个单击事件触发单选按钮被选中之前，一个函数绑定到单选输入上的单击事件触发。听起来有点混乱，所以这里看一下代码：

<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 方法。希望这一切都有意义。

4

2 回答 2

0

它通过将绑定切换到“更改”而不是“点击”来工作，但是 IE 仍然有问题。我通过调用 $(this).siblings("input").click().change(); 解决了这个问题。

于 2013-03-18T14:24:21.487 回答
0

IE 将无法使用 display:none 在收音机上触发点击标签；但是，您可以通过触发隐藏元素（或单击事件）上的更改事件来解决此问题（类似于您所拥有的）；您的标记也有问题。

我修改了您的标记以修复不能以数字开头的 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

于 2013-03-18T15:03:59.430 回答