2016-02-10 4 views
0

Я создал страницу для входа в систему с помощью всплывающего окна jquery. Работа в режиме входа в систему и вход в систему успешно работают. Но я хочу использовать jQuery Mobile Flip toggle switch или другие функции, которые можно использовать во всплывающем окне. Но не работает.JQuery Mobile css и js неправильно загружаются после динамического jquery mobile PopUp - C# .net MVC

Это мои файлы css и js по индексу.

<link rel="stylesheet" href="~/css/jquery.mobile-1.4.5.min.css"> 
<script src="~/js/jquery-1.11.3.min.js"></script> 
<script src="~/js/jquery.mobile-1.4.5.min.js"></script> 

это мой сценарий вызова ajax;

$('.makelogin').click(function() { 
     $("#popupLogin").popup("open"); 
     $.ajax({ 
      type: 'GET', 
      url: '/Login/MainLogin', 
      success: function (returnval) { 
       $("#popupLogin").html(returnval); 
       $("#popupLogin").popup("reposition", { positionTo: 'window' }); 
      } 
     }); 
    }); 

Это мой div;

<div id="popupLogin" data-role="popup" rel="external" data-overlay-theme="b"></div> 

Я пытаюсь добавить этот простой код, но я не мог. его не получают стили и функции js, которые не работают;

<form> 
<label for="flip-3">Flip toggle switch:</label> 
<select name="flip-3" id="flip-3" data-role="slider" data-mini="true"> 
    <option value="off">Off</option> 
    <option value="on">On</option> 
</select> 

, когда я скопировать и вставить HTML-код, из исходного кода страницы, стили работают, но JS функции не работают;

<div class="ui-slider ui-slider-switch ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all ui-mini" role="application"><span style="width: 100%;" role="img" class="ui-slider-label ui-slider-label-a ui-btn-active">On</span><span style="width: 0%;" role="img" class="ui-slider-label ui-slider-label-b">Off</span><div class="ui-slider-inneroffset"><a style="left: 100%;" aria-labelledby="flip-3-label" title="On" aria-valuetext="On" aria-valuenow="on" aria-valuemax="1" aria-valuemin="0" role="slider" class="ui-slider-handle ui-btn ui-shadow ui-slider-handle-snapping" href="#"></a></div></div> 
+0

я устал это, но он не работает; [ссылка] (http://www.gajotres.net/how-jquery-mobile-page-handling-affects-javascript-executions/). – besimler

ответ

0

Я исправил его. Ответ может помочь вам.

я использовал

$('#popupLogin').trigger('create');

Итак,

function openPopup() { 
     $("#popupLogin").popup({ positionTo: "window" }).popup('open'); 
    } 

    $('.xxx').click(function() { 
     $.ajax({ 
      type: 'GET', 
      url: '/Login/MainLogin', 
      success: function(returnval) { 
       $("#popupLogin").html(returnval); 
       $('#popupLogin').trigger('create'); 
       setTimeout(openPopup, 100); 
      } 
     }); 
    }); 

я фиксированной репозиция также ...