JQuery.on не работает с динамическим DOM/HTML
Я не совсем уверен, что это связано с моей установкой манифеста или если что-то происходит с событием .on и страницами, которые генерируют контент/модифицируют контент на лету, но я столкнулся с камнем преткновения.
Вот основная идея: я хочу, чтобы у вас есть возможность щелкнуть любую ссылку с URL-адресом, который соответствует шаблону, независимо от того, где находится пользователь/на какой странице они смотрят (и делать другие вещи вместо перехода на связь). Проблема, с которой я сталкиваюсь, заключается в том, что мой слушатель не будет работать на любой странице, которая изменяет его содержимое после загрузки содержимого (jQuery $(document).ready
) (например, gMail). Я ввожу свой javascript повсюду, и он все еще не работает.
Здесь код слушателя (в main.js):
$('a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]').on('click', function(event)
{
event.preventDefault();
SKDMmain(this);
});
Здесь код в моем background.html: (вводит мой script, когда загружается страница, а также когда изменяется вкладка/окно, поэтому она должна быть там. Примечание: jQuery включен выше, вместе со всеми локальными файлами .js, которые мне нужны)
<script type="text/javascript">
$(document).ready( function(){
chrome.tabs.executeScript(null,{file:"main.js"});
});
chrome.tabs.onActiveChanged.addListener( function(tabID,somethingElse){
chrome.tabs.executeScript(tabID,{file:"main.js"});
});
chrome.windows.onFocusChanged.addListener( function(windowID){
if ( windowId != chrome.windows.WINDOW_ID_NONE ) {
chrome.tabs.executeScript(null,{file:"main.js"});
}
});
</script>
Но на таких страницах, как gMail или this, слушатель не поймал событие. Первоначально я имел это как контент script, но недавно перевел его на использование фона и программного ввода, но ни один из них не работает правильно.
Здесь мой манифест, для справки:
{
"name": "SkedjoolMi",
"version": "0.5",
"description": "Automated Google Calendar event scheduling",
"background_page": "background.html",
"permissions": [
"tabs","http://*/","https://*/"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-1-7-1.js"],
"run_at": "document_end",
"all_frames": true
}
]
}
Ответы
Ответ 1
$('a[href^="http:.......').on('click', function() { ...
Будет работать только с якорями, которые уже присутствуют, когда страница отображается, а не динамически добавлены привязки. Вышеупомянутое точно совпадает с
$('a[href^="http:.......').bind('click', function() { ...
Здесь вы используете on
с динамически добавленным контентом:
$(document).on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...
Это создает делегированное событие. Все клики, которые происходят у потомков вашего документа (который есть все), будут проверяться, чтобы узнать, соответствует ли источник щелчка вашему селектору. Если это произойдет, ваше событие будет срабатывать. Именно поэтому он работает с динамически добавленным контентом.
В идеале, если вы можете гарантировать, что все эти якоря будут внутри некоторого контейнера, скажем, div с id foo
, следующее будет более эффективным:
$('#foo').on("click", 'a[href^="http://www.google.com/calendar/event?action=TEMPLATE"]', function() ...
Ответ 2
Я не уверен в точном контексте здесь - это звучит как невозможность перепрыгнуть границы IFRAME из-за безопасности чужих доменов.
Я бы попробовал таймер, который пытается собрать что-либо в вашей целевой части (часть dmail gmail DOM), если вы можете это сделать, вы можете обойтись без возможности jQ live, переместив собственный монитор (сохраните связанные ссылки в массиве).