Question

好的，我有一个文本输入框。我在文本框中也有一些fontawesome图标。

我试图在点击其中一个fontawesome时触发一个popover（来自twitter bootstrap 3）框。

我所做的一切似乎都无法奏效。

然而，捕获似乎是文件骨干。或至少.hamlc

以下是该文件的内容：

    %form#new-message-form{:name => 'message'}
      .input-group.input-group-unstyled
        %input#content.form-control.chat-input{:name => 'content', :type => 'text', :placeholder => 'Your message ...'}
        %span.input-group-addon
          %i.fa.fa-paperclip
          %i.fa.fa-star
          %i.fa.fa-clock-o
      .chat-send

我尝试做的其中一件事就是将一个ID附加到明星上，如下所示：

   `%i.fa.fa-star#example`

如果我将该ID附加到.hamlc文件之外的任何其他内容，则可以正常工作。

但是在上面的文件中，它没有。我不知道是不是因为它是骨干等等（我不知道骨干）

这是我附加的jquery :(不是我的jquery，只是我在网上扯下来测试它）

  $(document).ready(function() {
     $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
            '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
    content : 'test'
  });
});

我知道jquery的工作原理是因为我在第一个文件之外尝试了它。

但是我需要将popover附加到这个文件中的星。

有什么建议吗？

修改

只是为了澄清事情，第一个文件......这里是它的文件目录，以防万一在文件中无法正常工作

app/assets/javascript/templates/messages.new.hamlc

而且只是为了澄清，这是一个带有主干和coffeescript的rails应用程序上的红宝石。

因此文件类型为.hamlc ...

如果我想尝试让popover以不同的方式在文本框中处理一个fontawesome图标，请告诉我。我认真对待我的智慧。

编辑2

我认为这与输入文本框的文件没有接收到包含jquery的文件这一事实有关...

jquery文件的路径为app/assets/javascript/template.js

我正在尝试调用popover的文件如上所述：

app/assets/javascript/templates/messages.new.hamlc

Answer 1

将代码更改为此代码，它应该可以正常工作。

...
%i.fa.fa-star.pop
...

$(document).ready(function() {
     $(".pop").popover({
....

修改：工作，CodePen

如何将popover附加到fontawesome图标

1 个答案: