По JQuery, как указать на функцию как обработчик onClick для многих переключателей?

Question

У меня есть функция с именем handleOnClickRadio(i, j); и множество переключателей с именем id="something-radio[i][j]".Все эти переключатели находятся в таблице с именем "bigtable".

Как я могу прикрепить функцию handleOnClickRadio() ко всем этим переключателям?И назовите это правильно с handleOnClickRadio(i,j).

Спасибо.

Answer 1

Я бы вообще не привязывал обработчик кликов к кнопкам.Вы говорите, у вас их много.Присоединение одного и того же обработчика событий к каждому из них является пустой тратой памяти и может даже вызвать проблемы с производительностью.
Использовать делегирование события вместо:

$('#tableID').delegate('input[type=radio]', 'click', function() {
    // code here
});

Затем вы можете извлечь i и j с помощью регулярного выражения (вы также можете изменить шаблон так, чтобы вы могли использовать что-то более простое, например split()):

var exp = new RegExp("\\[(.+?)\\]\\[(.+?)\\]", 'g');
var match = exp.exec(this.id);
var i = match[1];
var j = match[2];

Вы можете сложить это вместе так:

$('#tableID').delegate('input[type=radio]', 'click', function() {
    var match = this.id.match(/\[(.+?)\]\[(.+?)\]/)
    var i = match[1]; // use parseInt(match[1]) if you need an integer
    var j = match[2];
    handleOnClickRadio(i,j);
});

_{edit: Сделан код немного проще.}

Если iи j соответствуют указателям на столбцы и строки, см. @ ответ Каспара Клейне об альтернативном способе их извлечения.

Для обеспечения доступности вам следует рассмотреть возможность привязки обработчика к changeсобытие.Тогда изменения через клавиатуру также будут распознаваться.

Answer 2

подключите событие как это

 $("#bigtable input[type='radio']").bind("click", OnClickRadio);

и используйте обработчик как

 var OnClickRadio = function () {
    var col =  $(this).parent("td").index();
    var row =  $(this).parent("td").parent("tr").index(); 
        handleOnClickRadio(col, row)
 });

Answer 3

Вы можете прикрепить метод onClick к коллекции радиокнопок в таблице простым битом jQuery. Когда вы говорите «таблица называется« bigtable »», я предполагаю, что вы имеете в виду, что в следующем коде она имеет id = «bigtable».

$(document).ready(function() {
  $("#bigtable input:radio").click(function() {
    // Your on click code here
  });
});

Тем не менее, я обычно назначаю каждой из переключателей определенный класс, используя class = "magicRadioButton", и тогда ваш код jQuery становится немного понятнее и не полагается на то, что все эти переключатели находятся внутри таблицы;

$(document).ready(function() {
  $(".magicRadioButton").click(function() {
    // Your on click code here
  });
});

Теперь, если вам нужно подключить эту информацию к текущему методу handleOnClickRadio, вы можете сделать это следующим образом.

$(document).ready(function() {
  $("#bigtable input:radio").click(function() {
    var button_id = $(this).attr("id");
    var re = new RegExp("\\[(.*?)\\]\\[(.*)\\]");
    var matches = re.exec(button_id);

    var i = matches[1];
    var j = matches[2];
    handleOnClickRadio(i,j);
  });
});

Answer 4

Я предлагаю использовать делегат, если у вас много радиостанций: таким образом, будет подключен только один слушатель событий

см. http://api.jquery.com/delegate/

$("#globalContainer").delegate("input", "click", function(){
    //Perform a string test / regex to test if the id matches something-radio[i][j]
    //With a regex with capturing groups you can retrieve [i] and [j] values at the same time    
    if ( test($(this).attr("id")) ) {
    }
});

Answer 5

<input type="radio" class="many-radio-buttons" ....

JQuery:

$('.many-radio-buttons').click(function() {
  //your_code;
});

Answer 6

В идеале, вы должны иметь клик, назначенный для большой таблицы, а не для каждого переключателя. События в JavaScript всплывают, поэтому таблица (которая является конечным родителем всех этих переключателей) будет получать событие.

Так что в jQuery у вас будет такой код

$('#bigtable').click(handleOnClickRadio);

Подпись вашей функции handleOnClickRadio будет

function handleOnClickRadio(evt) {    
   var radio = evt.target;
   var id = $(radio).attr('id'); 
}

evt.target идентифицирует фактическую кнопку радио, которая была нажата / отмечена, и вы также можете получить доступ к другим атрибутам радио. такие как

$(radio).attr('id)

Даст вам идентификатор переключателя.

Answer 7

Дайте им имена классов вместе с $(this) в вашем триггере клика