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

【问题标题】：How to have a 'click' event on an element inserted by jquery?如何在 jquery 插入的元素上发生“单击”事件？
【发布时间】：2014-08-19 11:30:01
【问题描述】：

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

当点击“on”时，行底纹应该打开[有效]，然后“on”链接应该变为（粗体）文本，“off”应该是一个链接来反转这个[无效]。

类似地，当单击“关闭”时，行阴影应该关闭 [有效]，“关闭”链接应该变为（粗体）文本 [有效]，“开启”文本应该变为可以单击时再次打开它[不起作用]。

点击链接应该发生反向并且链接应该变成文本并且文本变成链接。大多数情况都会发生，但我最终得到的链接在 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'after'是：

<span class="spaced">


                      Group Shading:
                    …

    <span id="group_shading_toggle">

        On 

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

</span>

不过那个off动态生成的“off”链接

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

相同

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


                          Off


</a>

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

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

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

【问题讨论】：

之后添加了链接的关闭文本。

标签： javascript jquery ruby-on-rails hyperlink haml

【解决方案1】：

click() 绑定只会将处理程序附加到已存在的元素。它不会绑定到将来创建的元素。为此，您将使用 on() 创建一个“委托”绑定

试试看。

【讨论】：