Ссылка на удаленный доступ с тегом <i> отправки прямого запроса вместо ajax

У меня странная проблема. Я использую 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 jquery rails.

Ответ 1

i закончил писать помощник действия вместе с функционалом javascript для отправки запроса ajax с помощью jquery.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'})%>

Ответ 2

Этот элемент. Плавает ли он или абсолютно позиционируется? Это может привести к тому, что ваш браузер будет обрабатывать его по-разному.

Попробуйте назначить его display: inline-block вместо поплавков или позиций и посмотреть, не устраняет ли проблема.

В качестве альтернативы вы можете привязать функцию javascript к дочернему элементу <i>, а также к <a> и посмотреть, помогает ли это.