链接没有内部Bootstrap排序李

Question

我有一个可排序的引导列表中的Django对象的列表，每个元素内有链接。点击链接时，什么也不做。没有任何行为，就像点击纯文本一样。悬停时，光标确实会改变，但否则它的行为就像不是链接。

我已经实现了这一点，但与按钮，而不是李的，并没有问题的链接。我已确认视图和网址可以正常工作，只需将它们放在其他网页上的正常链接即可。

有一个事件监听器 -​​在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用于拖N - 下降的动作，它的语法与starightforward和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/

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>