jQuery Мобильное всплывающее окно не открывается при загрузке через метод загрузки ajax

Question

Мои всплывающие окна jQuery Mobile больше не «всплывают», когда они загружаются через ajax. Я нажимаю на всплывающее окно, но ничего не происходит.

Это код, я использую, чтобы загрузить контент, который включает всплывающее окно:

$(document).on("pagecreate", ".main", function() { 
    $('.links').on('click', 'a', function() { 
     $('.container').load(url + '.bin', function() { 
      $(".pops").popup(); 
     }); 
     return false; 
    }); 
}) 

Я пытался инициализировать всплывающее окно с помощью $(".pops").popup(); но не сделал никакой разницы.

Кто-нибудь знает, что я делаю неправильно?

Заранее благодарен!

Answer 1

Чтобы получить всплывающее окно работает должным образом, он должен быть прямым ребенок из страницы DIV. Он будет работать неправильно, если он находится внутри любого другого div.

Решение добавить держателю место DIV внутри страницы DIV, .load("url .selector") всплывающее окно специально деление с, заменить его место держатель, а затем инициализировать его .popup().

Целевая страница

<div data-role="page"> 
    <div class=".popup-place-holder"> 
    <!-- place holder for popup --> 
    </div> 
</div> 

Popup

<div data-role="popup" id="pop" data-history="false" data-dismissible="false"> 
    <a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing...</p> 
</div> 

JS

$(document).on("pagecreate", function() { 
    $(".any-button").on("click", function() { 
     $(".popup-place-holder").load("URL #pop", function (data) { 
      var popup = $(this).find("#pop"); /* find popup inside place-holder */ 
      $(this).replaceWith(popup); /* replace place-holder with popup div */ 
      popup.popup(); /* initialize popup */ 
     }); 
    }); 
}); 

Demo - Code

.selector является всплывающими делами.