Question

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

我之前已经实现了这个，但是使用按钮代替li，并且在那里没有链接。我已经确认视图和URL工作得很好，方法是将它们放在普通链接的其他页面上。

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

包含链接的标签的代码:( 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一起明星前进，你的例子就像：

background-image: url('./wp-content/uploads/2016/12/opt_tree_only.png');
background-size: contain;
background-repeat: no-repeat;
background-position: 10% 25%;

和一些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; });用于禁用选择。

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

Answer 2

您的" "值

似乎缺少href

<a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >

将其更改为此

<a href="{% url 'benchmarks:questionremove' Question_id=question.pk %}" >

此外，您当前的HTML格式不正确..

  <span style="float:right;">
      <a href={% url 'benchmarks:questionremove' Question_id=question.pk %} >
          <span class="glyphicon glyphicon-pencil"></span>
  </span>
     </a>

结构与上面提到的" "一起，您的最终HTML必须看起来像..

  <span style="float:right;">
      <a href="{% url 'benchmarks:questionremove' Question_id=question.pk %}">
          <span class="glyphicon glyphicon-pencil"></span>
      </a>
  </span>

链接不在Bootstrap可排序的li内部触发

2 个答案: