使用 <i> 标记链接到远程发送直接请求而不是 ajax答案

【问题标题】：Link to remote with <i> tag sending direct request instead of ajax使用 <i> 标记链接到远程发送直接请求而不是 ajax
【发布时间】：2012-07-02 23:13:56
【问题描述】：

我有一个奇怪的问题。我正在使用 twitter bootstrap btn、btn-primary 以及自定义图标类，就像他们的 gliphicon 一样。

示例代码如下

<a href="send/path" class="btn btn-primary" data-loading-text="Sending..." data-remote="true" style="float:none;"><i class="icon-send margin-right-5"></i>Send</a>

当我点击按钮中的文本（即发送）时，它会发送 ajax 请求。但是当我点击按钮中的图标时，它会发送直接请求。如果通过 ajax 加载相同的按钮。两者都可以正常工作。

我不知道为什么浏览器发送直接请求会覆盖 jquery rails javascript 定义的数据远程功能。

【问题讨论】：

标签： jquery ruby-on-rails ajax button twitter-bootstrap

【解决方案1】：

这个元素。它是浮动的还是绝对定位的？这可能会导致您的浏览器以不同的方式处理它。

尝试分配它display: inline-block 而不是浮动或位置，看看是否可以解决问题。

或者，您可以将 javascript 函数绑定到子 <i> 元素以及 <a> 并查看是否有帮助。

【讨论】：

如何将父a标签的onclick函数绑定到i标签上？

【解决方案2】：

我最终编写了一个动作助手和一个 javascript 函数来使用 jquery.ajax 发送一个 ajax 请求

 def ajax_button_tag(url, text, button_html={}, icon_html={})
        icon_html[:class] = "margin-right-5" unless icon_html[:class] 
        icon_html[:class] = icon_html[:class] + " margin-right-5" unless (icon_html[:class] && icon_html[:class].match("margin-right-5"))
        icon_html_tag = raw("<i #{icon_html.map{|k,v| "#{k}=\"#{v}\""}.join()} ></i>")
        raw("<button #{button_html.map{|k,v| "#{k}=\"#{v}\""}.join()} onclick=\"sendAjaxRequest('#{url}');\">#{icon_html_tag}#{text}</button>")
      end

function sendAjaxRequest(path, mname){
    method_type = mname || "GET";
    jQuery.ajax({
        type: method_type,
        dataType: "script",
        url: path
    });
}

<%= ajax_button_tag('/path/to/resource', {:class=>"btn btn-primary", :remote=>true, 'data-loading-text'=>'updating...'}, {:class=>'icon-save icon-white'})%>

【讨论】：