使用链接访问页面时，Rails JavaScript 代码未执行

Posted 2023-05-09

【中文标题】使用链接访问页面时，Rails JavaScript 代码未执行

【英文标题】：Rails JavaScript code isn't executing when page is accessed with link

【发布时间】：2019-11-06 20:32:13

【问题描述】：

我遇到了一个奇怪的问题...我有一个页面，它使用一些 javascript 在 SVG 内部制作可拖动的图像，并且它可以工作。但在使用来自另一个页面的链接访问该页面时不会。初始加载后重新加载页面效果很好，甚至可以直接通过 URL 栏访问页面。我不知道该尝试什么。

在我的研究中，我偶然发现了这个答案：Rails, javascript not loading after clicking through link_to helper

但是在尝试了所有解决方案后，似乎都没有解决我的问题，尽管很可能是我没有正确地将它们应用到我的代码中。我的 SVG 元素作为“onload”属性指向“makeDraggable(evt)”函数，并且那里的大多数解决方案都使它无法访问该函数。

这是我生成的初始链接的代码：

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

这是我的 html 代码：

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

如果有人能对正在发生的事情有所了解，我将不胜感激。

另外，如果我的这篇文章的格式不太正确，请原谅我。第一次发帖：）

【问题讨论】：

那个6是错字吗？？？

这是一个非常大的错字，是的。大声笑

尝试在 turbolinks:load 函数中编写函数

我刚试过，但是 SVG 元素找不到它。

onload="makeDraggable(evt)" 的问题请使用 turbolinks:load 函数在 javascript 中调用该函数

【参考方案1】：

从#svg 元素中删除onload="makeDraggable(evt)"，因为 onload 函数在您使用 turbolinks 时内联编写时不起作用（就像 Rails 一样）。

然后将以下内容添加到您的 JS 中：

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

并将var svg = evt.target; 更改为var svg = evt;