Заглушка цепных запросов в Rails 3 и Rspec

Как добавить событие onload к элементу?

Могу ли я использовать для этого:

<div onload="oQuickReply.swap();" ></div>

?

212
задан Peter Mortensen 14 November 2019 в 01:08
поделиться

2 ответа

Можно присоединить слушателя события как ниже. Это инициирует каждый раз, когда отделение, имеющее селектор #my-id загрузки полностью в DOM.

$(document).on('EventName', '#my-id', function() {
 // do something
});

случай Inthis EventName может быть 'загрузкой' или 'нажать'

https://api.jquery.com/on/#on-events-selector-data-handler

0
ответ дан 23 November 2019 в 04:30
поделиться

В ноябре 2019 я ищу способ создать (гипотетический) onparse EventListener для [1 112], которые не берут onload.

(гипотетический) onparse EventListener должен смочь прислушаться , когда элемент анализируется .

<час>

Третья Попытка (и Категорическое Решение)

я был довольно доволен 1187-секундной Попыткой ниже, но это просто ударило меня, что я могу сделать код короче и более простой путем создания нестандартного события:

let parseEvent = new Event('parse');

Это - лучшее решение все же.

пример ниже:

  1. Создает нестандартное parse Event
  2. , Объявляет функцию (который может быть достигнут в [1 118] или любое время), который:
    • Находит любые элементы в документе, которые включают атрибут data-onparse
    • Присоединения parse EventListener к каждому из тех элементов
    • Отправки parse Event к каждому из тех элементов для выполнения Callback

Рабочий Пример:

// Create (homemade) parse event
let parseEvent = new Event('parse');

// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {

  // Get all the elements which need to respond to an onparse event
  let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
  
  // Attach Event Listeners and Dispatch Events
  elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

    elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
    elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
    elementWithParseEventListener.removeAttribute('data-onparse');
    elementWithParseEventListener.dispatchEvent(parseEvent);
  });
}

// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
  
  switch (e.target.dataset.onparsed) {

    case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
    case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
    case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
    case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
}

// Run Initialising Function
initialiseParseableElements();

let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';

setTimeout(() => {

  // Add new element to page after time delay
  document.body.appendChild(dynamicHeading);

  // Re-run Initialising Function
  initialiseParseableElements();

}, 3000);
div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

h3 {
position: absolute;
top: 0;
right: 0;
}
<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>
<час> 1154-секундная Попытка

Первая Попытка ниже (на основе [1 125]' блестящий Пустой Взлом Изображения ) использовала hardcoded <img /> и работала.

я думал, что должно быть возможно удалить hardcoded <img /> полностью и только динамично вставить его после обнаружения в элементе, который должен был стрелять onparse событие, атрибут как:

data-onparse="run-oQuickReply.swap()"

Это складывается, это работает очень хорошо действительно.

пример ниже:

  1. Находит любые элементы в документе, которые включают атрибут data-onparse
  2. , Динамично генерирует <img src /> и добавляет его к документу, сразу после каждого из тех элементов
  3. Огни onerror EventListener, когда механизм визуализации анализирует, каждый <img src />
  4. Выполняется Callback , и удаляет, это динамично генерировало <img src /> из документа

, Работающего Пример:

// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Dynamically create and position an empty <img> after each of those elements 
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

  let emptyImage = document.createElement('img');
  emptyImage.src = '';
  elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});

// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');

// Callback function for the EventListener below
const updateParseEventTarget = (e) => {

  let parseEventTarget = e.target.previousElementSibling;
  
  switch (parseEventTarget.dataset.onparse) {

    case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
    case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
    case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
  
  // Remove empty image
  e.target.remove();
}

// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
  
  parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
  
});
div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}
<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>
<час>

Первая Попытка

я могу основываться @JohnWilliams' <img src> взлом (на этой странице, с 2017) - который является, до сих пор, лучшим подходом, с которым я столкнулся.

пример ниже:

  1. Огни onerror EventListener, когда механизм визуализации анализирует <img src />
  2. , Выполняются Callback , и удаляет <img src /> из документа

, Работающего Пример:

let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');

const updateHeading = (e) => {

  let myHeading = e.target.previousElementSibling;
  
  if (true) { // <= CONDITION HERE
    
    myHeading.textContent = 'My Updated Heading';
  }
  
  // Modern alternative to document.body.removeChild(e.target);
  e.target.remove();
}

myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);
<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />
4
ответ дан 23 November 2019 в 04:30
поделиться
Другие вопросы по тегам:

Похожие вопросы: