Подтвердить что ты не робот

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
  }
]
}
4b9b3361

Ответ 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, переместив собственный монитор (сохраните связанные ссылки в массиве).