2

我已经查看了有关此控制台错误的其他问题。这些似乎都不能解决我的困境。我主要看到 API 共存的问题，以及我的其他更复杂的情况......

我正在尝试编写的脚本只是在单击父级时单击子级输入（收音机）。这很容易成为我很长时间以来编写的最小的函数，但我很烦恼。为什么这么小的脚本不起作用？我什至用这两个按钮的 html 和 jquery 制作了一个新的（简单的）html 文件，让它们做我想做的事。我尝试将输入的名称更改为不同的名称。没有骰子。好像 jQuery 被扔进了一个无限循环。

有没有人遇到过这个问题？我在 jQuery 的网站上看到了几个报告的错误，但他们是不正确地使用伪选择器的人（以及其他虚假的“错误”）。我想不通！在此先感谢您的任何指导...

更新：解决方案 使用<label>作为按钮。大多数浏览器将标签用作“单击随附的输入”。所以在这种情况下不需要 JQUERY。感谢下面贡献的每一个人！！！我想标记一些作为答案。但是不能...

使用的 jQuery 版本

jQuery 1.9.0

HTML

<div class="full-width">
    <div class="toggle">
        <div class="button">
            <input name="ship-to" type="radio" checked="checked" value="billing">
            <label for="ship-to">Ship to my billing address</label>
        </div>
    </div>
    <div class="toggle">
        <div class="button">
            <input name="ship-to" type="radio" value="different">
            <label for="ship-to">Ship to different address</label>
        </div>
    </div>
</div>

jQuery

$(document).ready(function(){
    /* Buttons */
    $('.button').click(function(){
        var $radio = $(this).children('input');
        $radio.click();
    });
});

控制台错误

Uncaught RangeError: Maximum call stack size exceeded
a
a.matches
st.extend.filter
st.fn.(anonymous function)
(anonymous function)
st.event.dispatch
y.handle
st.event.trigger
(anonymous function)
st.extend.each
st.fn.st.each
st.fn.extend.trigger
st.fn.(anonymous function)
(anonymous function)
st.event.dispatch
y.handle
st.event.trigger
(anonymous function)
st.extend.each
st.fn.st.each

...这种情况持续了相当长的一段时间。

4

4 回答 4

4

不要触发单选按钮的 Click 事件，而是设置单选按钮checked属性。当您手动触发收音机上的点击事件时，它会冒泡到父 div 点击，这反过来会导致递归循环。

演示

$(document).ready(function(){
    /* Buttons */
    $('.button').click(function(e){

        var $radio = $(this).children('input');
        $radio.prop('checked', !$radio.prop('checked')); 
       //Not sure if you need to toggle. if not use the below one.
        $radio.prop('checked', true);
    });
});
于 2013-05-06T17:59:59.093 回答
2

由于事件冒泡，单击输入还会触发包含 DIV 上的单击处理程序，该处理程序调用处理程序，从而导致无限递归。以下代码将检测这些递归点击并忽略它们。

$(document).ready(function(){
    /* Buttons */
    var inside_button_click = false;
    $('.button').click(function(){
        if (!inside_button_click) {
            var $radio = $(this).children('input');
            inside_button_click = true;
            $radio.click();
            inside_button_click = false;
        }
    });
});
于 2013-05-06T18:03:06.240 回答
1

您label需要定位input元素的 ID，而不是名称。

删除所有 JavaScript。然后按如下方式更改您的 HTML：

<input name="ship-to" id="ship-to-billing" type="radio" checked="checked" value="billing">
<label for="ship-to-billing">Ship to my billing address</label>

和：

<input name="ship-to" id="ship-to-different" type="radio" value="different">
<label for="ship-to-different">Ship to different address</label>

在大多数浏览器中单击标签将自动触发对具有属性中命名的ID的输入元素的单击。for这是一个可用性功能，是您问题的首选解决方案。

于 2013-05-06T18:03:42.633 回答
0

确保事件不是来自无线电。

$(document).ready(function(){
    /* Buttons */
    $('.button').click(function(e.target){
        var $radio = $(this).children('input');
        if (e.target !== $radio[0]) {
            $radio.click();
        }
    });
});
于 2013-05-06T18:05:15.947 回答