Я новичок в Crossrider и хочу иметь возможность запускать события на основе взаимодействия пользователя со страницей.
Например, воспроизводить звук, когда пользователь наводит курсор на элемент ввода html:
расширение.js
appAPI.ready(function() {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav')
$('input').mouseenter(function(){
Alarm01.play();
})
});
Код выше не работает. Кто-нибудь знает, как правильно это сделать?
Я также пытался поместить его в background.js - это тоже не работает. Я использую Chrome в качестве браузера.
Идея состоит в том, чтобы пользователь мог выбрать событие во всплывающем окне (например, воспроизвести Alarm01 при наведении курсора на элемент ввода), а затем немедленно применить его к текущей веб-странице. Так что в следующий раз, когда пользователь наведет курсор на элемент ввода, будет воспроизводиться Alarm01.
Каков правильный способ доступа к элементам HTML-страницы в расширении Crossrider?
Благодарю вас!
EDIT: дополнительный вопрос
Можно ли запускать события при взаимодействии пользователя с элементами JQuery Mobile? Например, элемент data-role="slider":
appAPI.ready(function($) {
//the link to Alarm01 is valid
var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
// Add audio to page
document.body.appendChild(Alarm01);
$('[data-role=slider]').on('change', function(){
Alarm01.play();
})
});
Спасибо!!!!
EDIT: Если я включу JQuery Mobile в extension.js, я получу в два раза больше каждого элемента на мобильном веб-сайте. Поэтому вместо одного элемента data-role="slider" я получаю два...
Я получаю это: 
вместо этого: 
