Масонство не работает после щелчка по URL-адресу

В моем приложении rails Im пытается реализовать масонство. Проблема заключается в том, что когда я нажимаю на ссылку (изображения), масонство не работает, но если после щелчка вы обновите страницу, это сработает. Есть идеи? БлагодаряМасонство не работает после щелчка по URL-адресу

вот сайт: https://salty-waters-72129.herokuapp.com/images

Код:

<p id="notice"><%= notice %></p> 
<head> 

<script src="/assets/jquery.swipebox.js"></script> 
<link rel="stylesheet" href="/assets/swipebox.css"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<link rel="stylesheet" href="/assets/responsive.css" media="screen and (max-width: 900px)" charset="utf-8"> 

</head> 
<body> 
<h1>Listing Images</h1> 

<div id='masonry'> 
    <% @images.each do |image| %> 
    <%= link_to image.image_url.to_s,class: "swipebox" do %> 
    <div class="hov col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
     <div class="hovereffect"> 
     <%= image_tag image.image_url.to_s, :class => "img-responsive" %> 
      <div class="overlay"> 
      <h2><%= image.name %></h2> 
     </div> 
     </div> 
    </div> 
    <% end %> 
<% end %> 
</div> 
<script src="/assets/masonry.pkgd.min.js"></script> 
</body> 

<script type="text/javascript"> 
$(window).load(function() { 
    var container = document.querySelector('#masonry'); 
    var msnry = new Masonry(container, { 
    columnWidth: '.hov', 
    itemSelector: '.hov' 
    }); 
    }); 
;(function($) { 
    $('.swipebox').swipebox(); 
})(jQuery); 
</script>

источник

2016-03-15 Andy

Проблема не с каменной кладкой, но что $(window).load(...) блок не работает при нажатии кнопки Images.

Это связано с тем, что ссылка на ссылку Images обрабатывается с помощью javascript, и это не приводит к полной перезагрузке страницы, в результате она делает запрос ajax на сервер и заменяет содержимое страницы. Таким образом, $(window).load() не запускается.

Проверьте js application code, запрос ajax отправляется с блока fetchReplacement = function(url, onLoadFunction, showProgressBar) {....

Похоже, что этот код принадлежит turbolinks.js, here - это тот же код, что и у вас.

Если вам действительно не нужна эта библиотека turbolinks, просто удалите ее, и она должна устранить проблему. И если вам это нужно - проверьте документацию, вы можете подписаться на событие загрузки страницы (он делает return triggerEvent(EVENTS.LOAD) в обработчике ответа ajax) и инициализирует кладку там.

источник

2016-03-15 20:55:49

Спасибо за ваш ответ! Это сработало!! +1 – Andy

@ Энди Я рад, что это помогло, подумайте о том, чтобы мой ответ был «принят», поэтому другие люди, приходящие сюда, будут знать, что проблема решена. –

Масонство не работает после щелчка по URL-адресу

ответ

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