鏈接沒有內部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>