如何在jquery插入的元素上发生“点击”事件？

我想开启| off元素，使其以粗体显示当前选中的选项，并提供指向另一个选项的链接。一个相当普遍的模式。我已经使行着色本身起作用了，但是提供用于打开和关闭它的链接（或文本）证明是很麻烦的。

单击“开”时，行阴影应打开[有效]，然后“开”链接应更改为（粗体）文本，而“关”应为反向链接[无效]。

同样，当单击“关闭”时，行阴影应关闭[works]，“关闭”链接应更改为（粗体）文本[works]，“开”文本应更改为可以将其打开的链接再次单击时[不起作用]。

单击该链接将发生相反的情况，该链接应成为文本，而该文本则成为链接。大多数情况都发生了，但是我最终得到的链接在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'before'是：

<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的链接不起作用？

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