Загрузка jQuery с помощью AJAX

Question

Как и большинство из нас, jQuery загружается/активируется при загрузке страницы, но если вы загружаете контент через код AJAX, в большинстве случаев требуется несколько изменений или перезапуска.

Я хотел бы сделать FitVids внутри Magnific popup для работы с загруженным контентом AJAX. Все попытки с этим были провалены, пока я успешно исправил всплывающие подсказки Bootstrap и несколько других мелких вещей.

---

Fitvids внутри main.js

(function($) { 

    "use strict"; 

    $.fn.fitVids = function(options) { 
    var settings = { 
     customSelector: null, 
     ignore: null, 
    }; 

    if(!document.getElementById('fit-vids-style')) { 
     // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js 
     var head = document.head || document.getElementsByTagName('head')[0]; 
     var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}'; 
     var div = document.createElement('div'); 
     div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>'; 
     head.appendChild(div.childNodes[1]); 
    } 

    if (options) { 
     $.extend(settings, options); 
    } 

    return this.each(function(){ 
     var selectors = [ 
     "iframe[src*='player.vimeo.com']", 
     "iframe[src*='youtube.com']", 
     "iframe[src*='youtube-nocookie.com']", 
     "iframe[src*='kickstarter.com'][src*='video.html']", 
     "object", 
     "embed" 
     ]; 

     if (settings.customSelector) { 
     selectors.push(settings.customSelector); 
     } 

     var ignoreList = '.fitvidsignore'; 

     if(settings.ignore) { 
     ignoreList = ignoreList + ', ' + settings.ignore; 
     } 

     var $allVideos = $(this).find(selectors.join(',')); 
     $allVideos = $allVideos.not("object object"); // SwfObj conflict patch 
     $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video. 

     $allVideos.each(function(){ 
     var $this = $(this); 
     if($this.parents(ignoreList).length > 0) { 
      return; // Disable FitVids on this video. 
     } 
     if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } 
     if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width')))) 
     { 
      $this.attr('height', 9); 
      $this.attr('width', 16); 
     } 
     var height = (this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10)))) ? parseInt($this.attr('height'), 10) : $this.height(), 
      width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), 
      aspectRatio = height/width; 
     if(!$this.attr('id')){ 
      var videoID = 'fitvid' + Math.floor(Math.random()*999999); 
      $this.attr('id', videoID); 
     } 
     $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); 
     $this.removeAttr('height').removeAttr('width'); 
     }); 
    }); 
    }; 
// Works with either jQuery or Zepto 
})(window.jQuery || window.Zepto); 
; 

Некоторые дополнительные Fitvids + всплывающее окно в main.js

jQuery(document).find('.property-video-popup').magnificPopup({ 
    type: 'iframe' 
}); 

HTML, который вызывает всплывающее

<a href=" video URL " class="property-video-popup"> Icon, text, tooltip etc </a> 

Похоже, что я ошибался в всплывающем окне - это отдельный файл min.js. Мне удалось ее уничтожить, но я должен предупредить вас - это довольно долго. Там характер лимит, я был вынужден отрезать некоторые .. Дайте мне знать, если есть что-то важное, что отсутствует!

(function(e) { 
    var t, n, i, o, r, a, s, l = "Close", 
     c = "BeforeClose", 
     d = "AfterClose", 
     u = "BeforeAppend", 
     p = "MarkupParse", 
     f = "Open", 
     m = "Change", 
     g = "mfp", 
     h = "." + g, 
     v = "mfp-ready", 
     C = "mfp-removing", 
     y = "mfp-prevent-close", 
     w = function() {}, b = !! window.jQuery, 
     I = e(window), 
     x = function(e, n) { 
      t.ev.on(g + e + h, n) 
     }, k = function(t, n, i, o) { 
      var r = document.createElement("div"); 
      return r.className = "mfp-" + t, i && (r.innerHTML = i), o ? n && n.appendChild(r) : (r = e(r), n && r.appendTo(n)), r 
     }, T = function(n, i) { 
      t.ev.triggerHandler(g + n, i), t.st.callbacks && (n = n.charAt(0).toLowerCase() + n.slice(1), t.st.callbacks[n] && t.st.callbacks[n].apply(t, e.isArray(i) ? i : [i])) 
     }, E = function(n) { 
      return n === s && t.currTemplate.closeBtn || (t.currTemplate.closeBtn = e(t.st.closeMarkup.replace("%title%", t.st.tClose)), s = n), t.currTemplate.closeBtn 
     }, _ = function() { 
      e.magnificPopup.instance || (t = new w, t.init(), e.magnificPopup.instance = t) 
     }, S = function() { 
      var e = document.createElement("p").style, 
       t = ["ms", "O", "Moz", "Webkit"]; 
      if (void 0 !== e.transition) return !0; 
      for (; t.length;) 
       if (t.pop() + "Transition" in e) return !0; 
      return !1 
     }; 
    w.prototype = { 
     constructor: w, 
     init: function() { 
      var n = navigator.appVersion; 
      t.isIE7 = -1 !== n.indexOf("MSIE 7."), t.isIE8 = -1 !== n.indexOf("MSIE 8."), t.isLowIE = t.isIE7 || t.isIE8, t.isAndroid = /android/gi.test(n), t.isIOS = /iphone|ipad|ipod/gi.test(n), t.supportsTransition = S(), t.probablyMobile = t.isAndroid || t.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent), o = e(document), t.popupsCache = {} 
     }, 
     open: function(n) { 
      i || (i = e(document.body)); 
      var r; 
      if (n.isObj === !1) { 
       t.items = n.items.toArray(), t.index = 0; 
       var s, l = n.items; 
       for (r = 0; l.length > r; r++) 
        if (s = l[r], s.parsed && (s = s.el[0]), s === n.el[0]) { 
         t.index = r; 
         break 
        } 
      } else t.items = e.isArray(n.items) ? n.items : [n.items], t.index = n.index || 0; if (t.isOpen) return t.updateItemHTML(), void 0; 
      t.types = [], a = "", t.ev = n.mainEl && n.mainEl.length ? n.mainEl.eq(0) : o, n.key ? (t.popupsCache[n.key] || (t.popupsCache[n.key] = {}), t.currTemplate = t.popupsCache[n.key]) : t.currTemplate = {}, t.st = e.extend(!0, {}, e.magnificPopup.defaults, n), t.fixedContentPos = "auto" === t.st.fixedContentPos ? !t.probablyMobile : t.st.fixedContentPos, t.st.modal && (t.st.closeOnContentClick = !1, t.st.closeOnBgClick = !1, t.st.showCloseBtn = !1, t.st.enableEscapeKey = !1), t.bgOverlay || (t.bgOverlay = k("bg").on("click" + h, function() { 
       t.close() 
      }), t.wrap = k("wrap").attr("tabindex", -1).on("click" + h, function(e) { 
       t._checkIfClose(e.target) && t.close() 
      }), t.container = k("container", t.wrap)), t.contentContainer = k("content"), t.st.preloader && (t.preloader = k("preloader", t.container, t.st.tLoading)); 
      var c = e.magnificPopup.modules; 
      for (r = 0; c.length > r; r++) { 
       var d = c[r]; 
       d = d.charAt(0).toUpperCase() + d.slice(1), t["init" + d].call(t) 
      } 
      T("BeforeOpen"), t.st.showCloseBtn && (t.st.closeBtnInside ? (x(p, function(e, t, n, i) { 
       n.close_replaceWith = E(i.type) 
      }), a += " mfp-close-btn-in") : t.wrap.append(E())), t.st.alignTop && (a += " mfp-align-top"), t.fixedContentPos ? t.wrap.css({ 
       overflow: t.st.overflowY, 
       overflowX: "hidden", 
       overflowY: t.st.overflowY 
      }) : t.wrap.css({ 
       top: I.scrollTop(), 
       position: "absolute" 
      }), (t.st.fixedBgPos === !1 || "auto" === t.st.fixedBgPos && !t.fixedContentPos) && t.bgOverlay.css({ 
       height: o.height(), 
       position: "absolute" 
      }), t.st.enableEscapeKey && o.on("keyup" + h, function(e) { 
       27 === e.keyCode && t.close() 
      }), I.on("resize" + h, function() { 
       t.updateSize() 
      }), t.st.closeOnContentClick || (a += " mfp-auto-cursor"), a && t.wrap.addClass(a); 
      var u = t.wH = I.height(), 
       m = {}; 
      if (t.fixedContentPos && t._hasScrollBar(u)) { 
       var g = t._getScrollbarSize(); 
       g && (m.marginRight = g) 
      } 
      t.fixedContentPos && (t.isIE7 ? e("body, html").css("overflow", "hidden") : m.overflow = "hidden"); 
      var C = t.st.mainClass; 
      return t.isIE7 && (C += " mfp-ie7"), C && t._addClassToMFP(C), t.updateItemHTML(), T("BuildControls"), e("html").css(m), t.bgOverlay.add(t.wrap).prependTo(t.st.prependTo || i), t._lastFocusedEl = document.activeElement, setTimeout(function() { 
       t.content ? (t._addClassToMFP(v), t._setFocus()) : t.bgOverlay.addClass(v), o.on("focusin" + h, t._onFocusIn) 
      }, 16), t.isOpen = !0, t.updateSize(u), T(f), n 
     }, 
     close: function() { 
      t.isOpen && (T(c), t.isOpen = !1, t.st.removalDelay && !t.isLowIE && t.supportsTransition ? (t._addClassToMFP(C), setTimeout(function() { 
       t._close() 
      }, t.st.removalDelay)) : t._close()) 
     }, 
     _close: function() { 
      T(l); 
      var n = C + " " + v + " "; 
      if (t.bgOverlay.detach(), t.wrap.detach(), t.container.empty(), t.st.mainClass && (n += t.st.mainClass + " "), t._removeClassFromMFP(n), t.fixedContentPos) { 
       var i = { 
        marginRight: "" 
       }; 
       t.isIE7 ? e("body, html").css("overflow", "") : i.overflow = "", e("html").css(i) 
      } 
      o.off("keyup" + h + " focusin" + h), t.ev.off(h), t.wrap.attr("class", "mfp-wrap").removeAttr("style"), t.bgOverlay.attr("class", "mfp-bg"), t.container.attr("class", "mfp-container"), !t.st.showCloseBtn || t.st.closeBtnInside && t.currTemplate[t.currItem.type] !== !0 || t.currTemplate.closeBtn && t.currTemplate.closeBtn.detach(), t._lastFocusedEl && e(t._lastFocusedEl).focus(), t.currItem = null, t.content = null, t.currTemplate = null, t.prevHeight = 0, T(d) 
     }, 
     updateSize: function(e) { 
      if (t.isIOS) { 
       var n = document.documentElement.clientWidth/window.innerWidth, 
        i = window.innerHeight * n; 
       t.wrap.css("height", i), t.wH = i 
      } else t.wH = e || I.height(); 
      t.fixedContentPos || t.wrap.css("height", t.wH), T("Resize") 
     }, 
     updateItemHTML: function() { 
      var n = t.items[t.index]; 
      t.contentContainer.detach(), t.content && t.content.detach(), n.parsed || (n = t.parseEl(t.index)); 
      var i = n.type; 
      if (T("BeforeChange", [t.currItem ? t.currItem.type : "", i]), t.currItem = n, !t.currTemplate[i]) { 
       var o = t.st[i] ? t.st[i].markup : !1; 
       T("FirstMarkupParse", o), t.currTemplate[i] = o ? e(o) : !0 
      } 
      r && r !== n.type && t.container.removeClass("mfp-" + r + "-holder"); 
      var a = t["get" + i.charAt(0).toUpperCase() + i.slice(1)](n, t.currTemplate[i]); 
      t.appendContent(a, i), n.preloaded = !0, T(m, n), r = n.type, t.container.prepend(t.contentContainer), T("AfterChange") 

         Character limit!!!!! 

Answer 1

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

1. Clone существующие всплывающие ссылки (с амбулаторными СОБЫТИЙ)
2. удалить исходные элементы
3. Append клонированные элементы
4. Инициализируйте плагин снова. (Таким образом, плагин добавит события ко всем вновь добавленным элементам).

Попробуйте использовать код ниже, как только ajax будет успешным, и создадут новые элементы.

var $popups = jQuery('.property-video-popup'); 
var $clones = $popups.clone(); 

$clones.each(function(index,elem){ 
    var $popup = $popups.eq(index); 
    jQuery(elem).insertAfter($popup); 
    $popup.remove(); 
}) 

jQuery('.property-video-popup').magnificPopup({ 
    type: 'iframe' 
});