Получить значение/атрибут нажатой кнопки как event.data с помощью .on(click)

Мне нужно получить значение или любой другой атрибут нажатой кнопки, чтобы использовать его как event.data внутри функции.

Вот настройка:

  • получил 26 кнопок со значением/текстом от «А» до «Я» в качестве элемента управления для списка по алфавиту.
  • каждая кнопка имеет одинаковый class="byalpha"
  • каждая кнопка запускает одну и ту же функцию поиска ajax, которая получает json-данные из sql для составления списка
  • нажав кнопку class="byname", уникальное значение (например, "B") должно быть доставлено в функцию как event.data.letter

Я мог бы заставить это работать с другими элементами управления функцией, используя радио-входы и прочее:

$( "input[name=selectdept]" ).on ("click", {  searchdept: function (){ return $( "input[name=selectdept]:checked" ).val()}}, startsearch );

Итак, как вы видите, щелчок по входу запускает function(startsearch) и получает значение ввода как event.data.searchdept для использования внутри функции. Все работает нормально.

Но попытка сделать это с помощью кнопок сводит меня с ума. Я пробовал все, что мог только представить. Поскольку мне нужно получить кнопку по классу, а не по уникальному имени или идентификатору, я не могу использовать ее, как с радио-вводом. Я пытался получить любой атрибут, используя $(this). Но просто приходит с «неопределенным». Некоторые из моих подходов:

$(".byname").on ("click", {letter: $(this).attr('value')}, searchdept );

or

$(".byname").on ("click", {letter: function(){ return $(this).attr("value")}}, searchdept );

или любой тип

.val()  // .attr() // .text() // .html()  .... you name it

Где-то здесь я нашел это "event.target.value", которое выдавало бы правильное значение (например, "B" для кнопки B), но не является хорошим решением в контексте моей функции, так как есть в общей сложности 3 различных способа (26 кнопок / 4 радио-ввода / текстовый ввод) для запуска функции, и доставленные значения усложнили бы ее.


javascript events button jquery attr
person Lox    schedule 19.03.2015    source источник
comment
Можете ли вы опубликовать свой HTML-код? даже если вы можете возиться с ним, это было бы здорово.   -  person Mox Shah    schedule 19.03.2015
comment
сможете ли вы изменить обработчик кликов... можете ли вы поделиться обработчиком кликов   -  person Arun P Johny    schedule 19.03.2015
comment
кстати, this, к которому вы обращаетесь, не является целевым объектом события, это функция letter, которая также является объектом и не имеет методов, к которым вы пытаетесь получить доступ, кстати, почему вы пытаетесь передать значение в объект события, вы не можете просто вызвать метод в обратном вызове onclick.   -  person Mushtaq Jameel    schedule 19.03.2015
comment
<input type="button" /> или <button></button> элементов? Можно включить html в исходное сообщение?   -  person guest271314    schedule 19.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

Здравствуйте, я не мог толком понять, что вы пытаетесь здесь сделать, но догадался, что вы хотите получить значение переменной данных, которую вы установили для каждой кнопки.

Я воссоздал ваш сценарий EDIT — обновил код Javascript, и теперь он работает в соответствии с вашими требованиями.

HTML

$('.byalpha').on('click', {
    'letter': function(element) {
      return $(element).data('letter');
    }
  },

  function(e) {
    $('#picked_letter').html(e.data.letter(this));
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="byalpha" type='button' value='A' data-letter="a" />
<input class="byalpha" type='button' value='B' data-letter="b" />
<input class="byalpha" type='button' value='C' data-letter="c" />
<input class="byalpha" type='button' value='D' data-letter="d" />
<input class="byalpha" type='button' value='E' data-letter="e" />

<hr/>
<div>
  <span>Letter : </span>  <span id="picked_letter"></span>
</div>
<hr/>

Javascript

$('.byalpha').on('click', 
    {'letter': function (element) {
            return $(element).data('letter');
        }
    }, 
    function (e) {
        $('#picked_letter').html(e.data.letter(this));
    }
);

вот ссылка на рабочий образец

http://jsfiddle.net/70fje1mh/2/

person Mushtaq Jameel    schedule 19.03.2015
comment
Вот и все!!! Ты мужчина! Так что в основном я был довольно близок к части получения данных из элемента. $( ".byname" ).on ("click", {letter: function (element) {return $(element).data('letter')}}, searchdept); вторая часть вашего примера (функция (e)) в моей настройке не нужна. НО решающим фактором на самом деле был (this) при вызове данных о событии --› event.data.letter(this) для функции searchdept THX*1001! - person Lox; 19.03.2015
comment
Да, поскольку вы передали метод, который будет выполнен, я просто хотел захватить обратный вызов, вот почему? - person Mushtaq Jameel; 19.03.2015