Link does not work inside Bootstrap sortable li

Question

I have a sorted list of Django objects inside a Bootstrap tab with links inside each element. Links, when clicked, do nothing. There is no behavior as if you clicked on plain text. When you hover over the cursor, it really changes, but otherwise it acts like a link.

I implemented this before, but with buttons instead of li, and had no problems with links. I have confirmed that browsing and URLs work very well by placing them on other pages in regular links.

There's an event listener - keydownat jquery.js:4334- which, if killed from developer tools, seems to fix this problem. I don’t know what it is, how it started, or what other consequences kill him.

Code for tab containing links: (those that match 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

A simple tip here: from experience I learn that the jQuery user interface is PITA with such problems (mainly because it depends heavily on the default CSS classes and properties).

So now I am using dragula for drag-n-drop actions, its syntax is starightforward with VanillaJS, and your example would be something like this:

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; });

and some user-select: noneto turn off the selection.

Demo and docs: https://bevacqua.imtqy.com/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>