jquery - 链接未在 Bootstrap 可排序 li 内触发

Question

我在 Bootstrap 选项卡中有一个可排序的 Django 对象列表，每个元素内都有链接。单击这些链接后，不会执行任何操作。没有任何行为，就像您单击纯文本一样。悬停时，光标确实会发生变化，但除此之外它的行为就像不是链接一样。

我之前已经实现过这个，但是用按钮而不是li，并且那里的链接没有任何问题。通过将 View 和 URL 放置在正常链接的其他页面上，我已确认 View 和 URL 工作正常。

在 jquery.js:4334 处有一个事件监听器 - keydown - 如果从开发人员工具中终止该事件监听器，似乎可以解决该问题。我不知道这是什么，它是如何启动的，或者杀死它会产生什么其他后果。

包含链接的选项卡代码:(benchmarks:questionremove 的链接)

<div role="tabpanel"  class="tab-pane" data-toggle="tab" id="questions" href="#questions">
  {% csrf_token %}
  <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    // Sortable photos
    // jQuery and jQuery-UI are in base.html
    console.log('starting')
    var teacherid = "{{this_teacher.pk}}";
    var sectionid = "{{this_section.pk}}";
    var adminid = "{{this_admin.pk}}";
    var benchmarkid = "{{this_benchmark.pk}}";



    // using jQuery
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue =   decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    var baseUrl=document.location.href.split('/').slice(0,3).join('/')+'/benchmarks/';
    console.log(baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort");
    console.log("token",csrftoken)

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }



      $("#sortable").sortable({
        update: function(event, ui) {
          var serial = $('#sortable').sortable('serialize');

      $.ajax({
        url: baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort",
        type: "post",
        beforeSend: function(jqXHR, settings) {
              jqXHR.setRequestHeader("X-CSRFToken", csrftoken);
        },
        data: serial
      });
        },
      }).disableSelection();
    });
  </script>
  {% csrf_token %}

    <div class="admin container" style="padding-top:8px; padding-left:6px;">

      <div class="panel-group" style="width:100%;">
        {% if question_list %}
        {% csrf_token %}
          <ul id="sortable" class="ui-sortable">

            {% for question in question_list %}
              <li id="question_{{ question.pk }}" class="ui-state-default" style='background-color:#ffffff;'>
                <span class="glyphicon glyphicon-resize-vertical" style="left-padding:-2px;"></span>&nbsp;&nbsp;
                <span style="float:right;"><a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >
                  <span class="glyphicon glyphicon-pencil"></span></span>
                </a>
                {{ question.Number}} {{question.Text}}
              </li>

            {% endfor %}
          </ul>

        {% else %}
          ...

        {% endif %}
      </div>
      </div>

    </div>

Answer 1

这里简单的建议:根据经验，我发现 jQuery UI 是一个存在此类问题的 PITA(主要是因为它严重依赖于默认的 CSS 类和属性)。

因此，从现在开始，我将使用 Dragula 进行拖放操作，其语法与 VanillaJS 完全一致，您的示例如下所示:

dragula([document.querySelectorAll('#sortable li')]).on('dragend', function() {
    var serial = $('#sortable').sortable('serialize');

    $.ajax({
      url: baseUrl+teacherid+"-"+sectionid+"-"+adminid+"-"+benchmarkid+"/sort",
      type: "post",
      beforeSend: function(jqXHR, settings) {
          jqXHR.setRequestHeader("X-CSRFToken", csrftoken);
      },
      data: serial
    });
  },
}).on('selectstart', function(){ return false; });

还有一些user-select: none用于禁用选择。

演示和文档:https://bevacqua.github.io/dragula/