Можно ли вызвать метод для элемента, который еще не был загружен?

Question

Я написал этот небольшой плагин JQuery для загрузки контента на определенный элемент DOM в соответствии с хэш-обменом , но у меня возникают проблемы с работой карусели MaterializeCSS .

Вот home.html:

<div class="carousel">
    <a class="carousel-item" href="#one!">
        <img src="src/assets/carousel_slide_0.jpg">
    </a>
    <a class="carousel-item" href="#two!">
        <img src="src/assets/carousel_slide_1.jpg">
    </a>
    <a class="carousel-item" href="#three!">
        <img src="src/assets/carousel_slide_2.jpg">
    </a>
</div>

Вот мой index.js:

import "materialize-css/dist/js/materialize.min.js"
import "materialize-css/dist/css/materialize.min.css"

import "styles/vovojo.less"
import "./hashy-content.js"

$(document).ready(function () {
    $(".dropdown-trigger").dropdown({
        hover: true,
        constrainWidth: false
    });

    $("#content").addHash("index", "src/content/home.html");
    $("#content").addHash("quem-somos", "src/content/quem_somos.html");
    $("#content").addHash("contato", "src/content/contato.html");
    $().watch();
});

Поскольку я прикрепил хэш index к этому файлу home.html, каждыйкогда хэш меняется на #index, содержимое home.html загружается внутри идентификатора «содержимого».Проблема в том, что когда DOM index.html готов и хеш присоединяется к этому home.html, элемент .carousel еще не существует, поэтому, когда содержимое загружается (jQuery.load ()), карусель нене работаетЕсли я связываю функцию, вызываемую после загрузки содержимого, я получаю всевозможные ошибки, касающиеся других зависимостей.

Итак, возможно ли применить метод к элементу, который еще не был загружен?(Чтобы сделать обещание каким-либо образом / "подождите")

Как:

$ (документ) .whenNonExistentElementIsReady (function () {$ ("# NonExistentElement"). DoSomething ();});

Answer 1

Я дам Ринго правильный ответ, потому что он правильный (когда я прикрепил событие «щелчок» к телу, мне удалось заставить работать карусель после щелчка).Я нашел довольно неясное решение моей конкретной проблемы, которое я включу сюда для будущих пользователей:

$("#content").bind("DOMSubtreeModified", function () {
    $(".carousel").carousel();
});

Теперь, каждый раз, когда структура HTML / DOM этого элемента изменяется, код запускается(Что именно то, что мне было нужно).

Answer 2

Вы можете извлечь выгоду из использования jQuery.on ().

https://www.w3schools.com/jquery/event_on.asp

.on () присоединяет события к элементам FUTURE, а также к существующим в настоящее время.