Почему мой jQuery нажимает обработчик, кажется, работают многократно за некоторыми его целями?
Обновление 2018
Я знаю, что оригинальный вопрос был о Bootstrap 3, но теперь, когда Bootstrap 4 был выпущен, вот некоторые обновленные указания по вертикальному центру.
Важно! Вертикальный центр относительно высоты родительского
Если Родитель элемента, который вы пытаетесь отцентрировать, не имеет высоты , ни один из решений вертикального центрирования не будет работать!
Bootstrap 4 ]
Теперь, когда Bootstrap 4 является flexbox по умолчанию , существует много различных подходов к вертикальному выравниванию с использованием: auto-margins , flexbox utils , или дисплей использует вместе с вертикальное выравнивание использует . Сначала «использование вертикального выравнивания» кажется очевидным, но эти только работают с элементами отображения inline и table. Вот несколько вариантов вертикальной центровки Bootstrap 4.
1 - Вертикальный центр с использованием автоматических полей:
Другой способ вертикального центра - использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100 делает строку полной высоты, а my-auto будет вертикально центрировать столбец col-sm-12.
Card
Bootstrap 4 - вертикальный центр с использованием авто-полей Демо
my-auto представляет поля по вертикальной оси Y и эквивалентно:
margin-top: auto;
margin-bottom: auto;
2 - Вертикальный центр с Flexbox:
[1142] С Bootstrap 4 .row теперь display:flex, вы можете просто использовать align-self-center в любом столбце для его вертикального центрирования ...
Center
Taller
или используйте align-items-center на всем .row, чтобы выровнять по центру по вертикали все col-* в ряду ...
Center
Taller
Bootstrap 4 - столбцы с разной высотой вертикального центра Демонстрация
3 - вертикальный центр с использованием утилит дисплея:
Bootstrap 4 имеет утилиты отображения , которые можно использовать для display:table, display:table-cell, display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания элементов ячеек inline, inline-block или table.
I am centered vertically
Bootstrap 4 - вертикальный центр с использованием утилит дисплея Демонстрация
Также см .: Вертикальный центр выравнивания в Bootstrap 4 ]
Bootstrap 3
Метод Flexbox на контейнере элемента (ов) по центру:
.display-flex-center {
display: flex;
align-items: center;
}
Метод Transform TranslateY:
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Отображение встроенного метода:
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
5 ответов
Unable to replicate. I suspect that you're misrepresenting — oversimplifying, mostly — your situation. To be precise, I believe you're dynamically adding those inputs, and calling $(".newContentLink").click(...) each time — which, naturally, keeps applying additional copies of the click handler to each .newContentLink in the page.
So the most recent input you've created has one copy of the click handler and appends one 1. The second most recent has two copies and appends 11. The third has three and appends 111, etc.
To prevent this, apply the click handler to your newly created DOM element, not $(".newContentLink") (which always means every .newContentLink).
Это не ошибка jQuery - Рабочая демонстрация
В вашем коде должна быть проблема с чем-то еще. Где в вашей разметке элемент с id = "test" ?
РЕДАКТИРОВАТЬ:
Просто прочтите ответ chaos , который звучит как правдоподобное объяснение.
Между прочим, идентификаторы элементов в разметке HTML должны быть уникальными - это часть спецификации HTML и может быть другим возможным объяснением
As chaos says, you're probably calling click() each time you add one, and they're accumulating.
If you're adding these items to the document dynamically, and need to make sure this function is added to every one you add, how about using live?
$('#contents').on('click', '.newContentLink', function() {
$("#test").append("1");
});
This will make sure the rule is dynamically applied once to any qualifying class in the document.
Попробуйте дать разные имена элементам ввода для отправки.
У меня была аналогичная проблема .... Выяснилось, что я применял функцию изменения в цикле ... т.е. мой предыдущий код был ....
$("table#UserIRTable > tbody > tr").each(function()
{
..............
..............
$("input[id='thisMonthSupply']").change(function(e){
......
});
..........
..........
}
убрал функцию изменения и бинго ... это сработало .....