Question

我想切换一个| off元素，以便为当前选定的选项加粗，并提供指向其他选项的链接。一种相当常见的模式。我得到了行阴影本身的工作，但是显示链接（或文本）来打开和关闭它们都很麻烦。

单击“打开”时，行阴影应打开[工作]，然后“打开”链接应更改为（粗体）文本，“关闭”应为反转此链接[不起作用]。< / p>

类似地，当单击“关闭”时，行着色应关闭[工作]，“关闭”链接应更改为（粗体）文本[工作]，“开启”文本应更改为可以链接点击后再打开[不起作用]。

单击链接，反之亦然，链接应成为文本，文本将成为链接。大多数情况发生但我最终得到的链接在ui中没有做任何事情或似乎向我显示任何控制台错误。

我开始使用以下HAML（HTML也显示在下面）

%span.spaced
  Group Shading:
  %span#group_shading_toggle
    - if session[:group_shading] == 'true'
      %b  
        On
      %a{href: '#', id: 'row_colors_off'}
        Off
    - else
      %a{href: '#', id: 'row_colors_on'}
        On
      %b  
        Off

我有javascript：

$(function()
{
    $("a#row_colors_on").click(function()
    {
        $(".row_color_group_1").addClass("color_group_1");
        $(".row_color_group_2").addClass("color_group_2");
        $(".row_color_group_3").addClass("color_group_3");
        // Replace the "on" toggle link with plain "on" and the group shading "off" *text* with link to off
        $("#group_shading_toggle").html("On <a href='#' id='row_colors_off'>Off</a>");
        $.get('/set_group_shading?show=true').defaultPrevented;
     });
});

$(function()
{
    $("a#row_colors_off").click(function()
    {
       $(".row_color_group_1").removeClass("color_group_1");
       $(".row_color_group_2").removeClass("color_group_2");
       $(".row_color_group_3").removeClass("color_group_3");
       // Replace the "off" toggle link with a "off" text and the group shading "on" link with *text* "on"
       $("#group_shading_toggle").html("<a href='#' id='row_colors_on'>On</a> off");
       $.get('/set_group_shading?show=false');
    });
});

生成的html'之前'是：

<span class="spaced">


                      Group Shading:
                    …

    <span id="group_shading_toggle">
        <a id="row_colors_on" href="#">


                                  On


        </a>
        Off
    </span>

</span>

和点击后生成的html'之后是：

<span class="spaced">


                      Group Shading:
                    …

    <span id="group_shading_toggle">

        On 

        <a id="row_colors_off" href="#">Off</a>
    </span>

</span>

然而，关闭动态生成的“关闭”链接

不起作用，即使它看起来与

相同

<a id="row_colors_off" href="#">


                          Off


</a>

如果最初为该状态呈现，则工作。

为什么不显示js的链接不起作用？

我提供了比平常更多的代码来帮助其他人尝试类似的切换按钮并寻找各种解决方案。

Answer 1

click（）绑定只会将处理程序附加到已存在的元素。它不会受到将来创建的元素的约束。为此，您将使用on（）

创建“委托”绑定

试一试。

如何在jquery插入的元素上有一个'click'事件？

1 个答案: