JavaScript-код Rails не выполняется при обращении к странице по ссылке

Question

У меня странная проблема ... У меня есть страница, которая использует JavaScript для создания изображения внутри SVG-перетаскивания, и это работает.Но не при доступе к странице со ссылкой с другой страницы.Перезагрузка страницы после начальной загрузки работает отлично, и даже посещение страницы непосредственно через строку URL работает.Я в растерянности относительно того, что попробовать.

В своем исследовании я наткнулся на этот ответ: Rails, JavaScript не загружается после нажатия через link_to helper

Нопопробовав все решения, ни одно из них, казалось, не решило мою проблему, хотя могло легко случиться так, что я не применил их к своему коду правильно.Мой SVG-элемент в качестве атрибута 'onload', который указывает на функцию 'makeDraggable (evt)', и большинство решений там сделали его таким, чтобы он не мог получить доступ к этой функции.

Вот код дляисходная ссылка, которую я генерирую:

<%= link_to 'Play', canvas_path(:game => @game) %>

Вот мой HTML-код:

<div id="container">
  <svg id="svg" onload="makeDraggable(evt)" width="50%" height="90%" 
  xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="grid" width="40" height="40" 
       patternUnits="userSpaceOnUse">
        <rect width="80" height="80" fill="url(#smallGrid)"/>
        <path d="M 80 0 L 0 0 0 80" fill="none" stroke="black" stroke- 
        width="1"/>
      </pattern>
    </defs>
    <%@game_assets.each do |asset| %>
    <image class="draggable" id="<%=asset.id %>" height="536" width="536" 
    xlink:href="<%= url_for(asset.image) %>" x="<%= asset.position_x %>" y=" 
    <%= asset.position_y %>" style="position: relative;" 
    transform="translate(0 0)"></image>
    <% end %>
    <rect width="100%" height="100%"  style="pointer-events: none;" 
    fill="url(#grid)" />
  </svg>
</div>

А вот мой JavaScript:

$(document).on('turbolinks:load', function () {
    $('#svg').draggable();
    $('.draggable').draggable();
});

// Makes content inside of SVG draggable
// Source: http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
function makeDraggable(evt) {
    var svg = evt.target;

    svg.addEventListener('mousedown', startDrag);
    svg.addEventListener('mousemove', drag);
    svg.addEventListener('mouseup', endDrag);
    svg.addEventListener('mouseleave', endDrag);
    svg.addEventListener('touchstart', startDrag);
    svg.addEventListener('touchmove', drag);
    svg.addEventListener('touchend', endDrag);
    svg.addEventListener('touchleave', endDrag);
    svg.addEventListener('touchcancel', endDrag);

    var selectedElement, offset, transform,
        bbox, minX, maxX, minY, maxY, confined;

    var boundaryX1 = 10.5;
    var boundaryX2 = 30;
    var boundaryY1 = 2.2;
    var boundaryY2 = 19.2;

    function getMousePosition(evt) {
        var CTM = svg.getScreenCTM();
        if (evt.touches) { evt = evt.touches[0]; }
        return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
        };
    }

    function startDrag(evt) {
        if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);

            console.log("started dragging")

            // Make sure the first transform on the element is a translate transform
            var transforms = selectedElement.transform.baseVal;

            if (transforms.length === 0 || transforms.getItem(0).type !== 
                SVGTransform.SVG_TRANSFORM_TRANSLATE) {
                // Create an transform that translates by (0, 0)
                var translate = svg.createSVGTransform();
                translate.setTranslate(0, 0);
                selectedElement.transform.baseVal.insertItemBefore(translate, 
              0);
            }

            // Get initial translation
            transform = transforms.getItem(0);
            offset.x -= transform.matrix.e;
            offset.y -= transform.matrix.f;

            confined = evt.target.classList.contains('confine');
            if (confined) {
                bbox = selectedElement.getBBox();
                minX = boundaryX1 - bbox.x;
                maxX = boundaryX2 - bbox.x - bbox.width;
                minY = boundaryY1 - bbox.y;
                maxY = boundaryY2 - bbox.y - bbox.height;
            }
        }
    }

    function drag(evt) {
        if (selectedElement) {
            evt.preventDefault();
            console.log("drag triggered")

            var coord = getMousePosition(evt);
            var dx = coord.x - offset.x;
            var dy = coord.y - offset.y;

            if (confined) {
                if (dx < minX) { dx = minX; }
                else if (dx > maxX) { dx = maxX; }
                if (dy < minY) { dy = minY; }
                else if (dy > maxY) { dy = maxY; }
            }

            transform.setTranslate(dx, dy);
        }
    }

    function endDrag(evt) {
        selectedElement = false;
    }
}

Если бы кто-нибудь мог пролить свето том, что происходит, я был бы очень признателен.

Кроме того, простите меня, если мое форматирование этого сообщения не совсем правильно.Первый постер:)

Answer 1

Удалить onload="makeDraggable(evt)" из элемента #svg, потому что onload Функция не будет работать, если она написана inline, когда вы используете turbolinks (как это делает Rails).

Затем добавьте в свой JS следующее:

$(document).on('turbolinks:load', function () {
 if($('#svg').length == 1){
  makeDraggable($('#svg'));
 }
});

и изменить var svg = evt.target; на var svg = evt;