JQuery: выберите элемент, который вызывает функцию

Я вызываю функцию в самом элементе через атрибут onclick потому что мне нужно, чтобы php динамически давал значение в одном из параметров функции. Когда я пытаюсь сослаться на вызывающий элемент в функции через $(this), он заканчивается ссылкой на все окно, а не на элемент. Как это исправить?

Ответ 1

Я сомневаюсь, что вам действительно нужно использовать встроенный атрибут onclick. Вы можете хранить данные в элементе различными способами. Трудно сказать, как именно вы это сделаете, не зная, какой параметр вам нужно пройти, но я приведу несколько примеров.

Наиболее гибким, вероятно, будет атрибут data-:

<a href="#" id="subject" data-type="fiction">Text</a>

Затем вы можете получить доступ к информации следующим образом:

$(document).ready(function(){
    $('#subject').click(function(){
        $type = $(this).data('type'); // this works as of jQuery 1.4.3, otherwise $(this).attr('data-type');

        // do your handling here, using $type
    });
});

Вы также можете сделать это с помощью классов, script тегов, которые создают глобальные переменные, всевозможные методы. Это почти наверняка будет лучше, чем положить обработчики jQuery в атрибуты onclick.

Ответ 2

Попробуйте отправить свой элемент в качестве параметра для вашей функции:

<input type="text" onclick="myfunction(this);"></input>

Ваша функция должна быть:

<script>
  function myfunction(currentElement){
    // ...
  }
</script>

Ответ 3

Решение заключается в сохранении динамического значения в пользовательском атрибуте, а не в обработчике onclick. Спецификация HTML определяет любой атрибут, начинающийся с "data-", как пользовательские данные, используемые точно для таких вещей, и это в спецификации, чтобы он подтверждал. Таким образом, вы можете сделать что-то вроде этого (используя PHP для примера, соответствующим образом настройте):

<input type="text" id="some-input" data-some-dynamic="<?php echo $something; ?>">

Затем загрузите в javascript следующим образом:

$(document).ready(function() {
  $('#some-input').click(function() {
    // $(this) -- is the input element
    // $(this).attr('some-dynamic-attribute') -- contains the dynamic data you need
  });
});

Я думаю, что этот метод превосходит использование обработчиков атрибутов, таких как onclick = "", простой, потому что он более прочный с точки зрения дизайна; разделение проблем и все такое.