Действие по клику jQuery не активирует атрибут onclick
-
26-09-2019 - |
Вопрос
У меня возникли проблемы с получением функции, которая устанавливает все флажки, соответствующие поиску.Кажется, что событие щелчка срабатывает, но ни один флажок не проверяется и функция myFunc() не вызывается.
Он прекрасно работает при установке каждого флажка вручную, но кто хочет делать это с более чем 40 флажками - не мои пользователи.
Вы можете задаться вопросом, почему я использую div-onclick вместо непосредственно флажка ввода.Это потому, что я хочу дать своим пользователям больше область, на которую можно нажать, а не небольшой флажок.
Я хочу предоставить своим пользователям одну гиперссылку для выбора нескольких флажков, соответствующих определенным значениям атрибутов.
Мне нужно быстрое решение, так как у меня нет времени.
HTML
<div id="container">
<a href="#" onclick="clickAndCheckAllMatch('search for this text');return false;">some text</a>
<div id="*actual_ID*" onclick="myFunc(a, b, c, d);">
<input type="checkbox" id="book-*actual_ID*" onclick="this.parentNode.click;return false;">
</div>
</div>
JS
function myFunc(a, b, c, d) {
// does stuff
}
function clickAndCheckAllMatch(value) {
$('div[onclick*='+value+']').each(function(idx,e){
$('book-'+this.id).click();
}
РЕДАКТИРОВАТЬ
Когда я перешел из div к этикетка тогда мне не пришлось исправлять состояние флажка.А div или у блочного элемента должна быть какая-то проблема.
Я также удалил onclick из *div*s, что означало, что я мог напрямую нацеливаться на флажки и менять их значения идентификаторов только на *actual_ID*.
function clickAndCheckAllMatch(value) {
$('input[onclick*='+value+']').each(function(idx,e){
// e == this
$(this)[0].click();
if ($(this).attr('disabled')) {
//do nothing
} else {
if ($(this).attr('checked')) {
//do nothing
} else {
$(this)[0].click(); // only one checkbox per ID
}
}
});
}
function CheckAll() {
$('#container input[type=checkbox]:not(:checked)').each(function(idx,e){
$(this).click(); // notice the difference ?
});
}
Решение
Вместо того, чтобы пытаться использовать событие, чтобы изменить значение флажков, я бы сделал две вещи:
Дать пользователям большую область нажать, используйте
label
элемент, а неdiv
.label
Элементы непосредственно поддерживаются браузерами, вам не нужно ничего делать, чтобы заставить их работать. Есть два способа их использовать:<label><input type='checkbox'>Foo</label>
или
<input type='checkbox' id='chk1'><label for='chk1'>Foo</label>
Первый приятный, потому что вам не нужно использовать идентификаторы (которые должны быть совершенно уникальными на странице, поэтому она начинает быть боль); Последнее приятно для разметки ситуаций, когда вы не можете иметь
input
быть ребенкомlabel
для любой причины.Если вам нужно изменить состояние в коде, измените состояние напрямую, а не пытаясь вызвать событие. Например, если я хочу изменить состояние флажков
chk1
, Я просто делаю это:$('#chk1').attr("checked", true); // or false, of course
... или чтобы очистить все флажки в контейнере (полезно для этих «всех» или «нет» ссылок):
$('#container input[type=checkbox]').attr("checked", false); // or true, of course
Другие советы
Только что решил подобную проблему, связанную с обработчиком событий флажка, отображаемым ASP.net, как код js в атрибуте onclick, который я хотел вызвать.Сначала попробовал явно вызвать событие клика jQuery, но через некоторое время понял, что таким способом у меня ничего не получится.Итак, решение, которое сработало для меня:
someOtherObject.click(eval($('input').attr('onclick')));
Ваше здоровье.
this.parentNode.click
должно быть this.parentNode.click()
.
this.parentNode.click
это просто объект метода. Призывая к этому не будет выстрелить событие щелчка DIV. Вы должны добавить брекеты после click
, в противном случае событие не будет огонь.
Чтобы следить за комментарием заостренной, используйте это:
$(document).ready(function(){
$('.theAnchorTagClass').click(function(){
//Code to check all boxes here or do whatever else you need...
});
});
Просто замените что-то подобное за любой элемент, который вы пытаетесь зафиксировать событие CLICK.