2016-04-12 2 views
0

Я создаю раздел портфолио веб-сайта, в котором используется REST api Flickr. Список портфель элементов, однако, генерируются динамически этим кодом:jQuery не работает на динамически сгенерированных divs

$.ajax({ 
    url: "https://api.flickr.com/services/rest?method=flickr.photoSets.getList&user_id=********@N04&format=json&nojsoncallback=1&api_key=***********", 
    context: document.body 
}).done(function(results) { 
    results.photosets.photoset.map(function(item) { 
    var imgUrl = "https://farm" + item.farm + ".staticflickr.com/" + item.server + "/" + item.primary + "_" + item.secret + "" + ".jpg"; 
    $(" #portfolio_horizontal_container ").append(
     '<div class="portfolio_item interior design"> \ 
      <img src=' + imgUrl + ' alt="" /> \ 
      <div class="port-desc-holder"> \ 
       <div class="port-desc"> \ 
        <div class="grid-item"> \ 
         <h3><a href="folio-single">Quisque non augue</a></h3> \ 
         <span>Photography/ Web design</span> \ 
        </div> \ 
       </div> \ 
      </div> \ 
     </div>' 
    ) 
    }) 
}); 

У меня есть еще один плагин, который управляет портфельным взаимодействием и стилем. Однако, когда элементы DOM для элементов портфеля загружаются, другие плагины просто не работают, поэтому функциональность, применяемая к портфолио, не существует. Я пробовал и пытался решить это без успеха. Любые, хотя?

+0

Что вы имеете в виду * «JQuery просто не работает» *? Это не похоже на правильную строку для меня. У вас есть ошибки в консоли? –

+0

отредактирован .. Никаких ошибок в консоли. –

+0

Вы должны инициализировать плагин после добавления содержимого. Как/когда вы их инициализируете? –

ответ

2

Код, который прикрепляет обработчики событий к вашим элементам DOM, должен быть повторно запущен при добавлении новых элементов на страницу.

В той же функции, что и выше, вам необходимо повторно вызвать плагин, чтобы он знал о новой структуре.

+0

Я сделал это без успеха. –

+0

Я сделал это без успеха. Но вы правы, что и должно быть сделано. Проблема в том, что у меня есть два файла. scripts.js и plugins.js. плагины загружаются до того, как скрипты и скрипты устанавливают конфигурации для плагинов. Я даже попытался поместить весь код для обоих файлов внутри обратного вызова ajax после карты без успеха. Он загружается, но он инициализируется только в том случае, если я вернулся в историю –

0

Если я понял вашу проблему, вы можете создать функцию, которая создать событие и назвать его в Аяксе сделано:

function bindEvent(id){ 
     //initialize the plugin for the given id 
    } 

, то вы можете позвонить bindEvent, после Append внутри ajax.done с помощью id вновь вставленного html.

или

Если это событие, которое вы хотите связать вы можете использовать

$('body').on('click', 'my-dinamic-id', function(){...}) 
Смежные вопросы