锚元素内的单选按钮在 jQuery 单击处理程序后重置

发布于 2024-10-10 19:05:05 字数 1696 浏览 3 评论 0原文

我遇到的情况是，无线电类型的元素包含在元素中。锚元素有一个 href，但我想通过向该元素添加 jQuery“单击”处理程序来覆盖该行为。

单击处理程序使其内部的单选按钮成为组中选定的单选按钮。当单击锚点时，这一切都有效，但是，当单击单选按钮时，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 重置单选按钮？

原文

I have a situation where an element, of type radio, is contained in an element. The anchor element has a href but I want to override that behaviour by adding a jQuery 'click' handler to the element.

The click handler makes the radio button inside it the selected one within the group. This all works when the anchor is clicked, however, when the radio button is clicked it appears that jQuery resets the selected radio to the previously selected one!

Here is a the simplified page that duplicates the issue:

<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>

Does anyone have any idea how I can prevent jQuery for resetting the radio button?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺孤伤于心 2024-10-17 19:05:05

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

    });

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

    });

回复收藏 0 原文

如何视而不见 2024-10-17 19:05:05

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

<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');
    }
});

This is a slightly strange way of doing things. You can get the effect you are after by first using a label element instead of the span like so:

<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>

By doing this clicking anywhere in the label element will select the radio button.

From there you should watch for a change event on the radio buttons if you want to:

$('input:radio[name="rb"]').change(function() {
    if (this.checked) {
        alert('remember the deselected radio button changes also');
    }
});

回复收藏 0 原文

月下客 2024-10-17 19:05:05

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

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

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

The easiest way I've found to solve this issue is to remove the href attribute from the anchor element during the click event:

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

This means I no longer need to return false to prevent the default behaviour and the event can bubble up the DOM safely and everything then works.

回复收藏 0 原文

春庭雪 2024-10-17 19:05:05

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

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

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

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

回复收藏 0 原文

や三分注定 2024-10-17 19:05:05

$('input:radio').click(function(e) { 
    e.stopPropagation();
});

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

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

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

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

$('input:radio').click(function(e) { 
    e.stopPropagation();
});

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

The important part is stopping propagation of the click event when the radio button is clicked. However it seems that if you return false then the radio button is not select as you would expect it to be.

Next we bind the click event to any a tag which has an id starting with the letter "a". When clicked the first radio button input inside of the a tag is selected and then checked.

DEMO: http://jsfiddle.net/marcuswhybrow/mg66T/2/

回复收藏 0 原文

~没有更多了~