on('click') срабатывает не для всего контента
 

имеем страницу с динамически подгружаемым контентом.

вешаем обработчик

$('body').on('click', 'ul.code-lng-list li', function(e) {

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

$("ul.code-lng-list li").on("click", function(e) {

наоборот (и здесь, как раз, всё логично и в соответствии с описанием функции)

из-за чего может возникнуть такое поведение? куда рыть?

если использовать устаревшую live

$('ul.code-lng-list li').live('click', function(e) {

поведение такое же

итак, что нарыл самостоятельно:

часть такого контента внутри <form> - как раз здесь не срабатывает live(), но срабатываем bind(); часть (динамика) - не в <form>, там срабатывает live(), но логично не срабатывает bind()

как обойти? или вешать и через live(), и через bind() ?

пока сделал через костыль

$('body').on('click', 'ul.code-lng-list li', function(e) {
		e.preventDefault();
		BBCode.fixedLangSel(this);
	});
	
	$("form ul.code-lng-list li").on("click", function(e) {
		e.preventDefault();
		BBCode.fixedLangSel(this);
	});

но, может, всё-таки есть нормальное решение?

А что здесь костыльного?
Делегированный вызов события, все норм.

второй event можно убрать $("form ul.code-lng-list li").on("click", function(e)

костылность как раз во втором эвенте, его убрать нельзя, иначе события для элементов внутри <form> срабатывать не будут

вот что нарыл:
http://stackoverflow.com/questions/1...on-inside-form
http://stackoverflow.com/questions/1...ide-a-form-tag

придётся, видимо костыль оставить

а теперь поподробнее что не так

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<form>
	<input type="text" />
	<input type="password" />
	<button class="btn-login">Log in</button>
 </form>
 <button class="add">add</button>
<script>
$(document).ready(function () {
	document.body.onbeforeunload = function () {
		return "good bye";
	}
	$('form').on("click", ".btn-login", function () {
		alert("Button clicked!");
	});
	$(".add").on("click", function () {
		$("form").append('<button class="btn-login">Log in</button>');
	});
});
</script>

я понимаю, что в это сложно поверить, не видя собственными глазами, но ситуация такая:

есть некая страничка, на которой есть некий вид управляющих элементов.

часть их подгружается статично при загрузке странички, и распоалагюся в теге <form>, а часть подгружаются динамически и расположены вне <form>, в обычном <div>

так вот, обработчик на событие 'click', навешиваемый с помощью live()/on()
$('ul.code-lng-list li').live('click', function(e) {
$('body').on('click', 'ul.code-lng-list li', function(e) {

срабатывает только для элементов, расположенных в <div>, но не срабатывает для элементов, расположенных в <form>.

в то же самое время обработчик, навешиваемый с помощью
$("ul.code-lng-list li").on("click", function(e) {
срабатывает для статичных элементов в <form> (и естественно не срабатывает для динамических)

вот и возник вопрос, отчего может появляться такой артефакт в поведении

в общем, ситуация примерно как описанная в http://stackoverflow.com/questions/1...ide-a-form-tag

при замене <form> на <div> - работает


самое поганое то, что в созданном мной тестовом примере - работает и с <form> и с <div>

более того, скачал пример из http://stackoverflow.com/questions/1...ide-a-form-tag - он у меня тоже работает и с <form> и с <div>

короче, шайтанама какая-то, куда рыть, не знаю, поставил костыль пока

дико извиняюсь, ложная тревога.

в проблеме разобрался, на пути оказался "лишний" перехватчик в bubble , влияние которого я не учёл

всем спасибо за участие