Делегирование событий и загрузка jQuery ()

Question

Делегирование событий и загрузка jQuery ()

0

Я пытаюсь подключить событие к динамически загружаемым элементам навигации в навигационной панели. Когда щелкнули загруженный навигационный элемент, он что-то сделает (предупреждение "привет мир"). Я уверен, что ответ здесь имеет отношение к делегированию событий, но я пробовал кучу вещей и пока не понял.

myNav для загрузки:

   <div id='myNav'>
        <ul>
            <li id='navItem1'>1</li>
            <li id='navItem2'>2</li>
            <li id='navItem3'>3</li>
            <li id='navItem4'>4</li>
        </ul>
    </div>

Загружается в navBar:

<div id='navBar'>
</div>

Здесь js, который запускает его:

var loadURL = "index.html #myNav";
$("#navBar").load(loadURL).slideDown("medium");

Теперь прикрепите событие к вновь загруженному навигационному элементу (это часть, которую я делаю неправильно):

$('#navItem1').on("click", function(){ 
   alert("hello world!");
});

user2755541 31 март 2014, в 23:18

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

adeneo · Accepted Answer · 2014-03-31T18-55-00.000Z

Вам нужно будет использовать делегированную версию on() и делегировать элемент, который не динамически вставлен, в этом случае #navBar

$("#navBar").on("click", "#navItem1", function(){ 
   alert("hello world!");
});

или обратный вызов, предоставляемый в load(), для присоединения обработчика события, когда элементы фактически загружены

$("#navBar").load(loadURL, function() {
    $('#navItem1').on("click", function(){ 
        alert("hello world!");
    });
}).slideDown("medium");