jquery - container - popovers bootstrap 4

Enlace no disparando dentro de Bootstrap ordenable li

Question

Tengo una lista ordenable de objetos Django dentro de una pestaña Bootstrap, con enlaces dentro de cada elemento. Los enlaces, cuando se hace clic, no hacen nada. No hay comportamiento alguno, como si hicieras clic en texto sin formato. Al desplazarse, el cursor cambia, pero de lo contrario actúa como si no fuera un enlace.

Lo he implementado antes, pero con botones en lugar de li, y no tuve problemas con los enlaces allí. Confirmé que la vista y las URL funcionan bien al colocarlos en otras páginas en enlaces normales.

Hay un detector de eventos - keydown en jquery.js:4334 - que, si se jquery.js:4334 de las herramientas de desarrollo, parece solucionar el problema. No sé qué es esto, cómo se inició o cuáles son las otras consecuencias de matarlo.

Código para la pestaña que contiene los enlaces: (los que están en los benchmarks:questionremove de 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

Consejo simple aquí: por experiencia, descubrí que jQuery UI es un PITA con este tipo de problemas (principalmente porque depende en gran medida de las clases y propiedades CSS predeterminadas).

Así que de ahora en adelante estoy usando dragula para acciones de arrastrar y soltar, su sintaxis es starightforward con VanillaJS y su ejemplo sería algo así como:

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

y algunos user-select: none para deshabilitar la selección.

Demostración y documentos: https://bevacqua.github.io/dragula/

Answer 2

Parece que le falta un " " envoltorio alrededor de su valor href

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

Cambiarlo a esto

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

Además, su HTML actual no está formateado correctamente.

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

La estructura está junto con el " " mencionado anteriormente y su HTML final debe verse como ...

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