'$ (this)' в методе, вызываемом кнопкой, делает браузер не отвечающим

Question

В файле представления Rails в уменьшенном формате у меня есть:

= button_tag("Press me", onclick: "$.foo();")

, что приводит к рендерингу:

<button name="button" type="submit" onclick="$.foo();">Press me</button>

При нажатии этой кнопки я просто хочу выполнитьметод jQuery без каких-либо запросов к серверу Rails.В файле JavaScript, который нужно вызвать, я подтвердил, что соответствующий метод вызывается правильно, выполнив:

$.foo = function(){
  alert('foo');
};

, который сработал.В этом методе я на самом деле хочу получить доступ к (jQuerified) объекту кнопки, который был нажат.Я изменил метод на:

$.foo = function(){
  alert($(this));
};

, и это заставляет браузер зависать при нажатии кнопки.

Что не так с моим кодом и / или как правильно вjQuery метод для вызова объекта кнопки, который был нажат?

Answer 1

С помощью @Satpal в комментарии мне напомнили, что this в методе, как в моем исходном коде, будет ссылаться на объект window.И, как указал @muistooshort, мне нужно указать type: "button", чтобы избежать отправки запроса на сервер Rails.

Я изменил свой код на:

Просмотреть файл

= button_tag("Press me", type: "button", onclick: "$.foo(this);")

JavaScript

$.foo = function(target){
  alert($(target));
};

и я получил то, что хотел.

Answer 2

Попробуйте добавить прослушиватель событий и получите event.currentTarget:

<script>
    $(document).on('click', 'button[type="submit"]', function(event) {
        var btn = $(event.currentTarget);
        // ...
    });
</script>