表单“提交按钮”不会滑动答案

【问题标题】：Form 'submit button' won't SLIDE表单“提交按钮”不会滑动
【发布时间】：2017-05-14 09:09:01
【问题描述】：

请告诉我为什么滑动功能不起作用？

即使我调用 CSS 和 jquery，它也不会滑入真正的 HTML 页面：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="../css/slide-submit.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

我最后是把这个提交按钮集成到一个 Bootstrap4 网页模板中。

非常感谢您的帮助，

【问题讨论】：

它实际上可以工作jsfiddle.net/51gn2v45/2
您的库未正确包含，在控制台中存在例外情况
非常感谢，我也修复了真正的 HTML 页面，控制台中没有关于库的错误，但按钮仍然不会滑动：s529471052.onlinehome.fr/bootstrap-test/dashboard
嗯，你有没有为此添加代码？因为当我复制并粘贴这个i.gyazo.com/de7af06987273449b7a8254fd1bb378c.png 它开始工作i.gyazo.com/58dfd9df25cec9fc87e5f6d0c74181cd.mp4
但是负责那个的代码呢？看看我在上面粘贴的屏幕截图——当我在你的网站上时，我刚刚打开了控制台并粘贴了代码。似乎您的 webstie 客户端代码上没有处理程序。最好在 html 文件的头部包含库上的链接

标签： javascript jquery html css submit-button

【解决方案1】：

首先，在 JSfiddle 示例中，问题在于链接。这里（经过几次尝试）working example

其次，或者您的网站似乎忘记添加滑块处理代码。正如你所说，控制台没有错误，所以我只是尝试直接添加代码

（只看上面这部分，看看会不会有什么改变）

    /*!
 * Slide to submit button
 */

 $(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
  if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
    $(this).css({left: "auto", right: 0}).addClass("submitted").text("Submitting...").draggable('false');
    $(this).closest("form").submit();
  } else {
    $(this).css({left: 0});
  }
}}).on("click", function() {
  return false;
});

看起来成功了 (recorded animation here)

【讨论】：