Иногда теряется передаваемое в JQuery функцию значение

Question

Есть не большой участок кода с помощью которого я передаю значение id елемента в JQuery функцию. Вот верстка:

<div class="disF pad10 jsSBa">
    <span id="_prev" class="button-m color-blue mrR4px pager-btn"><b><<</b></span>
    <input type="checkbox" name="xxx" />
    <span id="_next" class="button-m color-blue mrR4px pager-btn"><b>>></b></span>
</div>

А это, собственно, и сама функция:

$("#_current_tab").on("click", ".pager-btn", function (e) {
      console.log(e.target.id);
        $.post("/workspace/changepage", {
            count: e.target.id
        }, function (result) {
            $("#_current_tab").empty();
            $("#_current_tab").append(result);
      });

Так во, ситуация такова, что при клике по кнопке, на которую повешено событие, в функцию через раз (а то и больше) не приходит ни чего (e.target.id - пуст)

Подскажите в чем загвоздка?

Answer 1

в функцию через раз (а то и больше) не приходит ни чего (e.target.id - пуст)

Это значит, что вы кликаете по элементу с классом .pager-btn в контейнере #_current_tab у которого атрибут id пустой.

Наиболее вероятная причина этого здесь

function (result) {
  $("#_current_tab").empty();
  $("#_current_tab").append(result);
}

Т.е. при завершении POST запроса вы очищаете все элементы из #_current_tab и добавляете те, что пришли. Скорее всего в ответе сервера id отсутствуют

Answer 2

Вы попадаете по элементу b, у которого нет id. Используйте this.id.

$(".pager-btn").on("click", function(e) {
  console.log("[",this.id,"]","[",e.target.id,"]");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disF pad10 jsSBa">
  <span id="_prev" class="button-m color-blue mrR4px pager-btn"><b>&lt;&lt;</b></span>
  <input type="checkbox" name="xxx" />
  <span id="_next" class="button-m color-blue mrR4px pager-btn"><b>&gt;&gt;</b></span>
</div>

<div id="_current_tab"></div>

Answer 3

В вас проблема в следующем. У вас есть DOM типа такого:  << 

Проблема в том, что event.target будет не  а , так как фактически вы нажали не на span а на div.

Как это исправить:
Испрользовать this вместо event.target - он будет равен как раз тому елементу, на который был повешан listener, а не его потомок.

ВАЖНО! Этот прием не будет работать с lambda-функциями, но это совсем другая история

$(".pager-btn")
    .on("click", function (e) {
        var $target = $(this);
        console.log($target.attr("id"));
        $.post("/workspace/changepage", {
            count: $target.attr("id")
        }, function (result) {
            $("#_current_tab").empty();
            $("#_current_tab").append(result);
        });
    });

Так же, если кнопки пагинации будет обновлятся, можно сделать так:

$("body").on("click", ".pager-btn", function (e) {
        var $target = $(this);
        console.log($target.attr("id"));
        $.post("/workspace/changepage", {
            count: $target.attr("id")
        }, function (result) {
            $("#_current_tab").empty();
            $("#_current_tab").append(result);
        });
    });

Тогда даже когда кнопки будут добавлятся - обработчик будет все равно работать

БЛОГ НА HUSL

Иногда теряется передаваемое в JQuery функцию значение

Ответы (3 шт):