jQuery, получающий данные из XML и получающий его к лайтбоксу

Я работаю с jQuery, чтобы вытащить результаты из XML-файла и показываю каждый вход в отделении. Это работает, но теперь я хочу сделать его так, чтобы, если я щелкаю по отделению, это показало больше данных из xml в лайтбоксе.

Я создал jsfiddle здесь, но это не работает:

Это - мой HTML:

xml !> <div id="clearfix"></div>
<
> X

Thomas More © Insilencio
Corporate identity maximum two lines

и это - мой jQuery:

    $.ajax({
    type: 'GET',
    url: "hellojames.commefort.com/onepager/data.xml",
    dataType: "xml",
    success: function (data) {
        //console.log(data);
        $(data).find("case").each(function() {
            var dezeCase = $(this);
            var id = dezeCase.find("id").text();
            var titel = dezeCase.find("titel").text();
            var thumb = dezeCase.find("thumb").text();
            var full = dezeCase.find("full");
            var images = full.find('img');
            var imagesArray = images;
            var html = '<div class="portfolio_item col" id="' + titel + '">' + titel + '

' + titel + '

</div>'; $('.portfolio').prepend(html); mouseHover(); caseClick(imagesArray); }); } }); function mouseHover() { $('.portfolio_item').mouseover(function() { $(this).children('img').addClass("hover"); $(this).children('.caption').show(); //console.log('hover'); }).mouseout(function() { $(this).children('img').removeClass("hover"); //console.log('stophover'); $('.caption').hide(); }); }; function caseClick(afbeeldingen) { /* Detailpagina */ $('.portfolio_item').on('click', function() { var lightbox = $('.portfolio_detail'); $(".ajax_image").empty(); lightbox.show().children().hide(); lightbox.animate({ width: '100%', height: "100%" }, 'fast'); lightbox.children().fadeIn('slow'); var inhoud = ""; $(".ajax_image").append(inhoud); }); };
0
Можно ли добавить обработчик ошибок к ajax и проверить ли, есть ли какая-либо ошибка? Мы не можем сделать этого от скрипки, поскольку она заканчивает тем, что была взаимным запросом области.
добавлено автор ryadavilli, источник
в коде нет никакой ошибки
добавлено автор Wannes, источник

2 ответы

Не уверенный, но это могло бы помочь:

Поскольку ваше отделение .portfolio_item динамично произведено так, необходимо , делегируют событие к существующему самому близкому родительскому элементу , или просто делегируют к самому документу , который является родителем всего elems на странице.

function caseClick(afbeeldingen) {
  $(document).on('click', '.portfolio_item', function() {
      var lightbox = $('.portfolio_detail');
      $(".ajax_image").empty();
      lightbox.show().children().hide();
      lightbox.animate({
        width: '100%',
        height: "100%"
      }, 'fast');
      lightbox.children().fadeIn('slow');
      var inhoud = "";
      $(".ajax_image").append(inhoud);
  });
} //<-----------';' not required same applies to function mouseover(){}

необходимо использовать ; , когда

var caseClick = function(afbeeldingen){
   //all your code stuff
};//<----------------------here `;` needed

создание функций как это.

0
добавлено
var $body=$(document.body); 
$body.on({

  'mouseover':function(e) {
    //..
      }
  ,'mouseout':function(e) {//...
   }

  ,'click', function() {
    var lightbox = $('.portfolio_detail');
    $(".ajax_image").empty();
    lightbox.show().children().hide();
    lightbox.animate({
        width: '100%',
        height: "100%"
    }, 'fast');
    lightbox.children().fadeIn('slow');
    var inhoud = "";
    $(".ajax_image").append(inhoud);
}
, '.portfolio_item');


 $.ajax({
type: 'GET',
url: "hellojames.commefort.com/onepager/data.xml",
dataType: "xml",
success: function (data) {
    var html='';
     //console.log(data);
    $(data).find("case").each(function() {
        var dezeCase = $(this);
        var id = dezeCase.find("id").text();
        var titel = dezeCase.find("titel").text();
        var thumb = dezeCase.find("thumb").text();
        var full = dezeCase.find("full");


        html += '<div class="portfolio_item col" data-imgsrc="'+full.find('img')+'" id="' + titel + '">' + titel + '

' + titel + '

</div>'; }); $(html).prependTo($('.portfolio')); } });

оптимизировать его немного больше обертки ваш пункт в одном контейнере pefore предварительное ожидание/добавление

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском