Magnific - проблема с передачей переменной javascript

При нажатии на ссылку на моей странице отображается предупреждение с идентификатором рассматриваемого элемента. Но следующее, что происходит (всплывающее окно, вызванное URL-адресом + строка запроса, содержащая этот идентификатор), отображается как неопределенное. Итак, я просто пытаюсь понять, почему идентификатор переменной не содержит значение при вызове всплывающего окна.

Изменить: Итак, теперь с текущими изменениями требуется 2 клика, чтобы всплывающее окно отображалось с правильной строкой запроса/идентификатором. Любые идеи? При изменении .magnificPopup на .magnificPopup.open ничего не происходит при нажатии.

Изменить: Теперь все работает. Исправлена ​​строка с: $.magnific.open для удаления привязанного к ней имени класса. Теперь все работает идеально. Спасибо за помощь!

<head><meta charset='UTF-8'> 

<link rel='stylesheet prefetch' href='magnific-popup/magnific-popup.css'>
</head><body>   
<script src='magnific-popup/jquery-2.1.4.min.js'></script>
<script src='magnific-popup/magnific-popup.js'></script>
<script type="text/javascript"> 
    $(document).ready(function () {
        $('.simple-ajax-popup2').click(function () {
            ID = $(this).data("var1");
           // alert(""+ID+"");
            $.magnificPopup.open({
            items: {
                src: 'Test.html?ID='  + ID + '' 
            },
            type: 'iframe',
        });
        }); 


    });
</script>
<a class="simple-ajax-popup2" data-var1="1" href='#' >
    test 1
</a> <br>
<a class="simple-ajax-popup2" data-var1="2" href='#' >
   test 2
</a> <br>
<a class="simple-ajax-popup2" data-var1="3" href='#' >
   test 3
</a> 
</body></html>

person Ginjo    schedule 26.10.2015    source источник


Ответы (1)


Вы должны вызывать свое всплывающее окно в функции события клика, иначе к моменту выполнения magnificPopup идентификатор все еще не определен:

$(document).ready(function () {
     $('.simple-ajax-popup2').click(function () {

          ID = $(this).data("var1");
          alert(""+ID+"");
          $('.simple-ajax-popup2').magnificPopup.open({
               items: {
                   src: 'Test.aspx?ID='  + ID + "" 
               },
               type: 'iframe',
           });
      });
});
person Lucas Rodrigues    schedule 26.10.2015
comment
Спасибо, это понятно, но все же кажется, что что-то не так. При первом переходе по ссылке отображается предупреждение, и больше ничего не происходит. 2-я попытка щелкнуть ссылку, похоже, работает правильно. Но затем, когда вы нажимаете на другие элементы на странице (та же ссылка, но с другим идентификатором/элементом), кажется, что всегда загружается значение из предыдущей ссылки, а не текущей. - person Ginjo; 26.10.2015
comment
Таким образом, для достижения правильного действия в основном требуется 2 клика. Любые идеи? - person Ginjo; 26.10.2015
comment
Вы тестировали код, который я редактировал, и это все еще происходит? - person Lucas Rodrigues; 26.10.2015
comment
Да, это результат кода, который вы разместили. Первый щелчок запускает предупреждение с текущим значением, но не вызывает всплывающее окно. 2-я попытка нажать работает правильно. Но он загружает значение предыдущего клика. - person Ginjo; 26.10.2015
comment
Хорошо, у меня нет всего вашего кода, но я удалил ненужную глобальную переменную и использовал метод открытия модального окна, чтобы увидеть, открывается ли он с первой попытки. - person Lucas Rodrigues; 26.10.2015
comment
На самом деле... Я думал, что у меня это работает, но оказалось, что это не так. По-прежнему требуется два клика, чтобы получить правильный идентификатор. И я попытался с вашим предложением .magnificPopup.open, что, похоже, не удалось. Не знаю, куда идти отсюда. Проблема, кажется, постоянна как в IE, так и в Chrome. - person Ginjo; 27.10.2015
comment
Вот упрощенная версия (см. исходный пост) - person Ginjo; 27.10.2015
comment
Вы должны заменить одинарные кавычки двойными кавычками на data-var1='3' - person Lucas Rodrigues; 27.10.2015
comment
Они были единственной причиной, по которой он заполнялся из БД. Я переключился на этот пример кода, но все еще не работает должным образом. - person Ginjo; 27.10.2015
comment
Я только что попытался внести изменения в ваш код, чтобы заблокировать предупреждение и немного изменить синтаксис при вызове открытия всплывающего окна. Теперь работает. Эта строка: $('.simple-ajax-popup2').magnificPopup({ Должно быть: $.magnificPopup.open({ - person Ginjo; 28.10.2015