Почему мой обработчик jQuery-кликов работает несколько раз для некоторых своих целей?

Я применяю:

$(".newContentLink").click(function() {
    $("#test").append("1");
});

В этом:

<span id="contents">
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content1" class="content study">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content3" class="content study">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
<span id="content4" class="content category">
</span>
<input class="newContentLink" type="submit" style="width: 100%;" value="CREATE A NEW CONTENT"/>
</span>

Как получилось? когда я нажимаю на первые 2 кнопки, он добавляет 111, следующая кнопка добавляет 11, и последний добавляет 1?

Ответ 1

Невозможно выполнить репликацию. Я подозреваю, что вы неверно представляете. упрощение, в основном — ваша ситуация. Если быть точным, я считаю, что вы динамически добавляете эти входы и вызываете $(".newContentLink").click(...) каждый раз — который, естественно, продолжает применять дополнительные копии обработчика кликов к каждому .newContentLink на странице.

Таким образом, самый последний вход, который вы создали, имеет одну копию обработчика кликов и добавляет один 1. Второй самый последний имеет две копии и добавляет 11. Третий имеет три и добавляет 111 и т.д.

Чтобы предотвратить это, примените обработчик кликов к вновь созданному элементу DOM, а не $(".newContentLink") (что всегда означает каждый .newContentLink).

Ответ 2

или вы можете отменить событие click каждый раз, когда вы добавляете новый элемент

$('.newContentLink').unbind('click');

$(".newContentLink").click(function() {
    $("#test").append("1");
});

Ответ 3

Как хаос говорит, вы, вероятно, называете click() каждый раз, когда вы добавляете его, и они накапливаются.

Если вы добавляете эти элементы в документ динамически и должны убедиться, что эта функция добавлена к каждому добавленному, как об использовании live?

$('#contents').on('click', '.newContentLink', function() {
    $("#test").append("1");
});

Это позволит убедиться, что правило динамически применяется один раз к любому квалификационному классу в документе.

Ответ 4

Не ошибка jQuery - Рабочий демонстрационный пример

В вашем коде должна быть проблема с чем-то другим. Где элемент с id="test" в вашей разметке?

EDIT:

Просто прочитайте ответ хаоса, который звучит как правдоподобное объяснение.

Кстати, идентификаторы элементов должны быть уникальными в HTML-разметке - это часть спецификации HTML и может быть еще одним возможным объяснением

Ответ 5

Чтобы убедиться, что функция выполняется только один раз при событии с одним щелчком вы можете использовать $( ". newContentLink" ). one();

$(".newContentLink").one(function() {
    $("#test").append("1");
});

Ответ 6

Попробуйте присвоить разные имена элементам ввода.

Ответ 7

У меня была аналогичная проблема... Выяснилось, что я применяю функцию изменения в цикле... т.е. мой предыдущий код был...

$("table#UserIRTable > tbody > tr").each(function()
{
   ..............
   ..............

  $("input[id='thisMonthSupply']").change(function(e){  
      ......
    });
  ..........
  ..........
}

взял функцию изменения и бинго... он работал.....