3

我有一个元素包含在一个元素中的情况。锚元素有一个 href 但我想通过向元素添加一个 jQuery 'click' 处理程序来覆盖该行为。

单击处理程序使其中的单选按钮成为组中的选定单选按钮。这一切都在单击锚点时起作用，但是，当单击单选按钮时，jQuery 似乎将选定的单选重置为先前选择的单选！

这是重复该问题的简化页面：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#a1").click(function(event) {
                anchorClicked("a1");
                return false;
            });
            $("#a2").click(function(event) {
                anchorClicked("a2");
                return false;
            });
        });

        function anchorClicked(anchorId)  {
            $('#' + anchorId + ' input:radio').attr("checked", true);
            alert("Look at what is selected and what happens after the event when this dialog is closed!");
        }
    </script>
</head>
<body>
    <form>
        <ul>
            <li id="li1"> 
                <a id="a1" href="javascript:alert('default functionality')">
                    <input value="1" name="rb" type="radio" id="rb1">
                    <span>Details 1</span>
                </a>
             </li>
            <li id="li2"> 
                <a id="a2" href="javascript:alert('default functionality')">
                    <input value="2" name="rb" type="radio" id="rb2">
                    <span>Details 2</span>
                </a>
             </li>
        </ul>
    </form>
</body>

有谁知道如何防止 jQuery 重置单选按钮？

4

5 回答 5

2 
<script type="text/javascript">
    $(document).ready(function() {
        $("input:radio").click(function(event){event.stopPropagation();});

    });
于 2011-01-06T11:44:21.473 回答
0

这是一种有点奇怪的做事方式。您可以通过首先使用label元素而不是跨度来获得您想要的效果，如下所示：

<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>

通过这样做单击label元素中的任意位置将选择单选按钮。

如果您愿意，您应该从那里观察单选按钮上的更改事件：

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});
于 2011-01-06T11:47:48.177 回答
0 
$('input:radio').click(function(e) { 
    e.stopPropagation();
});

$('a[id^="a"]').click(function(e) {
    $('input:radio:first', this).attr("checked", true);
    return false;
});

重要的部分是在单击单选按钮时停止传播单击事件。但是，如果您返回 false ，则似乎不会像您期望的那样选择单选按钮。

接下来，我们将点击事件绑定到任何aid 以字母“a”开头的标签。单击标记内的第一个单选按钮输入时，将a被选中，然后选中。

演示：http: //jsfiddle.net/marcuswhybrow/mg66T/2/

于 2011-01-06T14:16:36.363 回答
0

我发现解决此问题的最简单方法是在单击事件期间从锚元素中删除 href 属性：

  $("#a1").click(function(event) {
    this.removeAttribute("href");            
    anchorClicked("a1");
  });

这意味着我不再需要返回 false 来防止默认行为，并且事件可以安全地冒泡 DOM，然后一切正常。

于 2011-01-06T16:15:44.940 回答
0

问题是您取消默认锚标记行为的“返回 false”也取消了单击单选按钮的行为，因此无论单击事件的操作如何，它都会将其设置回原来的状态。将函数设置为返回 true 会表现出预期的行为（以及默认的单击功能）。

要最终修复它，您希望完全摆脱默认的点击事件。要做到这一点，您可以非常简单地将 href 更改为“#”，以便在操作时它不会做太多事情。有关此操作的示例，请参见http://jsfiddle.net/FrcRx/1/ 。

最好的方法是完全删除 href 属性。这当然会使大多数浏览器不将其视为链接，因此您需要自己应用适当的样式以使它们看起来仍然像链接。

这是通过 removeAttr jquery 函数和 addClass 函数完成的。在这里查看它的演示：http: //jsfiddle.net/FrcRx/2/

于 2011-01-06T16:23:39.450 回答