Js-jq dublicates .find

177
11 ноября 2018, 11:10

jq функция

  $( ".new-mark" ).click(function() {
  var self = $(this);
  var modal = $('#mark-modal');
  $('.mark-input').val('');
  $('.mark-input').change(function() {
    self.find('span').html($(this).val());
  });
});

которая привязана к элементу

    @foreach ...
    <td class="new-mark" style="display:none;">
<span></span>
</td>
    @endforeach

по первому вызову self.find('span') возвращает 1 элемент, по второму 2, и так далее. Все спаны имеют одинаковый текст, а каждый должен иметь свой.

Answer 1

Совет дня: не назначайте обработчики событий внутри других обработчиков событий.

$(function() {
  var self;
  $( ".new-mark" ).click(function() {
    self = $(this);
    $('.mark-input').val('');
  });
  $('.mark-input').change(function() {
    self.find('span').html($(this).val());
  });
});

В Вашем коде действие $('.mark-input').change(function() { ... }); выполняется на каждый $(".new-mark").click. То есть для события $('.mark-input').change добавляется новый обработчик. Когда событие $('.mark-input').change происходит, все прикрепленные обработчики выстреливают один за другим.

Весь показанный код следует обернуть в обработчик $(document).ready - это как раз то событие, внутри которого можно/следует назначать обработчики других событий. Тогда переменная self не будет засорять глобальную область видимости.

READ ALSO
Запись информации из textarea в файл

Запись информации из textarea в файл

Пишу JSP, реализовал считывание файла через java и отображение на разметке(поправьте, если в матчасти ошибся)

190
написать запрос используя fetch метод

написать запрос используя fetch метод

Для отправки запросов на сервер использовал утилиту CURL, но наткнулся на более удобный способ,- использую consolОтправка запросов методом fetch,...

193
При работе с датами на JS возникают ошибки

При работе с датами на JS возникают ошибки

date1 присваиваю текущее времяПотом date2 присваиваю date1 и добавляю 1 год, почему date1 при этом тоже увеличивается на 1 год? Связано ли это с тем, что...

148
Не работает @media запрос

Не работает @media запрос

Есть код, хочу добавить медиа-запрос с разрешением 992pxСмотрю через инспектор кода, но все как было, так и есть - стили медиа не применились

198