2016-04-19 2 views
1

У меня есть «быстрый просмотр» функция, которая захватывает динамический URL также известный как «qvURL» и создает ColorBox с ним через:JQuery - Colorbox - добавление функции в всплывающем окне

<script type="text/javascript"> 
    $(function(){ 
     $(".quickview_btn").click(function(e){ 
      e.preventDefault(); 
      var qvURL = $(this).attr("href"); 
      $.colorbox({"href": qvURL}) 
     }); 
     $.colorbox.resize(); 
    }); 
</script> 

сейчас. Мне нужно внести некоторые изменения в дочернее окно - но кажется, что AJAX или что-то уничтожает всю DOM, и все, что я загружаю из родительского окна, не отражает.

Например, допустим, я просто хочу добавить div, который говорит qwerty! [Я на самом деле хочу создать mbox вокруг вызова к действию]

Любое понимание было бы благодарно!

Обратите внимание: URL-адреса, которые она загружает, являются контентом, с которым я не могу манипулировать, поэтому это нужно сделать в родительском окне.

Спасибо!

Пожалуйста, смотрите ниже моего полного фрагмента кода:

<script> 
$(document).ready(function() { 

    $('.quickview_btn').click(function(){ 




    //Quickview tracking 
    $('.quickview').attr('id', 'quickviewClicked-area'); 

    mboxDefine('quickviewClicked-area','quickviewClicked','clicked=Y'); 

$('div.quickview').bind('click', function() { 
    console.log('clicked!'); 
    product = $(this).children().attr('href'); 
    console.log(product) 

    mboxUpdate('quickviewClicked', "link="+product); 
}); 



//thumbnail add to cart tracking 




$('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area'); 

mboxDefine('ThumbnailAddToCart-area','ThumbnailAddToCartClicked','clicked=Y'); 

$('div.qlBtns').bind('click', function() { 
; 


    mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y"); 
    console.log('mbox updated!') 
}); 


}); 

}); 

/* 
$(document).ready(function(){ 
     $(qvURL).$colorbox({ 
      iframe : true, 
      frastIframe: false, 
      onComplete: function(){ 
       $('.name').html('yeah you got it'); 
      } 
     }); 
    }); 
    */ 
</script> 

<script> 
 
    $(document).ready(function() { 
 

 
    $('.quickview_btn').click(function() { 
 

 

 

 
     //Quickview tracking 
 
     $('.quickview').attr('id', 'quickviewClicked-area'); 
 

 
     mboxDefine('quickviewClicked-area', 'quickviewClicked', 'clicked=Y'); 
 

 
     $('div.quickview').bind('click', function() { 
 
     console.log('clicked!'); 
 
     product = $(this).children().attr('href'); 
 
     console.log(product) 
 

 
     mboxUpdate('quickviewClicked', "link=" + product); 
 
     }); 
 

 

 

 
     //thumbnail add to cart tracking 
 

 

 

 

 
     $('div.add-to-cart').attr('id', 'ThumbnailAddToCart-area'); 
 

 
     mboxDefine('ThumbnailAddToCart-area', 'ThumbnailAddToCartClicked', 'clicked=Y'); 
 

 
     $('div.qlBtns').bind('click', function() {; 
 

 

 
     mboxUpdate('ThumbnailAddToCartClicked', "clicked=Y"); 
 
     console.log('mbox updated!') 
 
     }); 
 

 

 
    }); 
 

 
    }); 
 

 
/* 
 
$(document).ready(function(){ 
 
     $(qvURL).$colorbox({ 
 
      iframe : true, 
 
      frastIframe: false, 
 
      onComplete: function(){ 
 
       $('.name').html('yeah you got it'); 
 
      } 
 
     }); 
 
    }); 
 
\t */ 
 
< /script>

+0

Добавить на Plunker/Fiddle, и я могу вам помочь;) –

+0

Хмм - это немного сложно сделать, поскольку я вставляю код на страницу, - которая загружает вызов в действие. –

+0

от дочернего окна Предполагаю, вы имеете в виду содержимое colorbox? Но если это содержание не под вашим контролем, что вы пытаетесь достичь? – fnostro

ответ

0

Я вижу эту строку в коде:

$.colorbox({"href": qvURL}) 

и мой первый вопрос, является ли или а не того селектора. Имейте в виду, что я больше среднего уровня, чем гуру на стороне клиента, но из моего знания jQuery этот селектор ничего не сделает, потому что jQuery не может сказать, что вы имеете в виду. Посмотрите, как вы использовали кавычки при назначении функции щелчка?

$(".quickview_btn").click(function(e){ 
     e.preventDefault(); 

если вы использовали $ («# Colorbox»), чтобы получить объект (если это его идентификатор) или $ («Colorbox» если есть аа класса вы ориентируетесь. (я не эксперт, как я уже сказал, но те, кто согласен:

$(".someClass") selects all elements with class name someClass 
$("#testButton") selects the element with the id value of testButton 

- Предоставлено DZone jQuery Ref Card на https://dzone.com/refcardz/jquery-selectors

так что, может быть, что все остальное в порядке, вы просто не передаете код, чтобы подключиться к объекту colorbox.

+0

Привет, Джозеф! Большое вам спасибо - селектор действительно работает правильно в данный момент - см. Приведенную ниже ссылку (наведите указатель мыши на изображение и «быстрый просмотр») - это селектор –

Смежные вопросы