В своем расширении я пытаюсь сделать кучу кнопок. Каждое из чисел является кнопкой, поэтому все ячейки в таблице, кроме заголовка «Сохранить» и «Загрузить».
[![введите описание изображения здесь][1]][1] Итак, моя цель — 20 кнопок, 1–9 (и 0) слева для сохранения и еще 10 для загрузки. Я создал обработчики кликов для каждой кнопки и динамически генерирую таблицу.
Вот раздел соответствующего кода в моем скрипте, связанный с моей всплывающей html-страницей.
$(document).ready(populateGroupButtons)
function populateGroupButtons(){
const groups=[1, 2, 3, 4, 5, 6, 7, 8, 9, 0] //group 0 is at the end
let table=$('#groupButtons')
groups.forEach((group)=>{
table.append(
'<tr>'+
'<td id="save'+group+'">'+
group+
'</td>'+
'<td id="load'+group+'">'+
group+
'</td>'+
'</tr>'
)
})
$(document).ready(registerClickHandlers)
}
function registerClickHandlers(){
let table = $('#groupButtons')
for(let group=0; group<=9; group++){
$('#save'+group).click((e)=>{
console.log($('#save'+group))
});
$('#load'+group).click((e)=>{
console.log($('#load'+group))
})
}
}
Всплывающая HTML-страница
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='jquery-min.js'></script>
<link href='css/style.css' type='text/css' rel="stylesheet">
</head>
<body>
<h1>Popup</h1>
<table id='groupButtons'>
<tr>
<th>Save</th>
<th>Load</th>
</tr>
</table>
<p>Open console to see output</p>
<script type='text/javascript' src='popup-script.js'></script>
</body>
</html>
У меня это работает, если я просматриваю popup.html в новой вкладке, и это также работает здесь изолированно как jsfiddle
Проблема в том, что когда я использую его как расширение Chrome, ячейка таблицы, которую я нажимаю, не является правильной целью обработчика событий
- Прямо сейчас я просто подключаюсь к консоли, чтобы посмотреть, что происходит (я хочу, чтобы кнопки действительно делали что-то позже)
- Когда я нажимаю 1 в столбце «Сохранить», он записывает
#save2 - Когда я нажимаю 2 в столбце сохранения, он регистрирует
#save3 - Когда я нажимаю
<th>, который содержит слово «Сохранить», он регистрирует,#save1 - Строки 9 и 0 не реагируют на нажатие, поэтому не имеют обработчиков событий.
По сути, все смещено на 1 строку вверх, и я не знаю почему
Он отлично работает как на чистом JavaScript, так и на скрипке, но почему-то цель неверна
Вот zip-папка всего расширения< /сильный>
EDIT: Скриншот проблемы
Посмотрите, что происходит, когда я нажимаю ячейку "Сохранить".
Это даже НЕ должна быть кнопка, потому что это элемент <th>, тем не менее каким-то образом он регистрирует щелчок.
Обратите также внимание, что он регистрирует td#save1, несмотря на то, что место, где я щелкнул, было выше <td>, которое фактически регистрируется.
А после строки 8 они даже не регистрируются. регистрировать клики
event delegationвместо прикрепления события к каждой кнопке. - person Deliaz schedule 20.01.20181920 X 1080, а экран моего ноутбука —1538 X 864. Возможно, это разрешение браузера против родного разрешения. У меня также включено масштабирование125%в Windows Scale & Layout, но я не понимаю, как это должно повлиять на ситуацию. Я хочу, чтобы мое расширение работало на всех дисплеях, может быть, это крайний случай, но есть идеи? - person SleekPanther schedule 21.01.2018