Периодически не получаю параметр в функцию 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>

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

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

Логика работы следующая - кликнув по элементу .pager-btn отправляется POST запрос на сервер и полученный ответ добавляется в элемент `#_current_tab, предварительно очистив этот элемент.

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

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

Answer 1

В вас проблема в следующем. У вас есть 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

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