Javascript-форум - Почему теряет фокус?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Почему теряет фокус? (https://javascript.ru/forum/dom-window/76832-pochemu-teryaet-fokus.html)

Почему теряет фокус?

Добрый вечер. Упрощённо разметка выглядит так:

<table class="widefat fixed striped tags">
	<tbody id="singular-atts-list">
		<tr class="column-row">
			<td class="column-drag"><i class="dashicons dashicons-editor-justify"></i></td>
			<td class="column-label">shirina</td>
			<td class="column-value"><div class="attr-new"><input type="text" /></div><span>Удалить</span></td>
			<td class="column-measure">см</td>
		</tr>
	</tbody>
</table>

И есть три обработчика:

$('body').on('keyup', '#singular-atts-list .attr-new input', function() {
    // некий код
});
$(document).on('click', '#singular-atts-list td span', function() {
	// некий код
});
$('body').on('focusout', '#singular-atts-list td', function() {
	// некий код
});

Не понимаю, почему при нажатие по span (событие click ), у меня выполняется код из focusout?

Цитата:

Сообщение от Янковиц

почему при нажатие по span (событие click ), у меня выполняется код из focusout?

У меня не выполняется... :no:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('body').on('keyup', '#singular-atts-list .attr-new input', function() {
		alert(3);
	});
	$(document).on('click', '#singular-atts-list td span', function() {
		alert(1);
	});
	$('body').on('focusout', '#singular-atts-list td', function() {
		alert(2);
	});
});
</script>
</head>
<body>
<table class="widefat fixed striped tags">
	<tbody id="singular-atts-list">
		<tr class="column-row">
			<td class="column-drag"><i class="dashicons dashicons-editor-justify"></i></td>
			<td class="column-label">shirina</td>
			<td class="column-value"><div class="attr-new"><input type="text" /></div><span>Удалить</span></td>
			<td class="column-measure">см</td>
		</tr>
	</tbody>
</table>
</body>
</html>

ksa,
Если сначала кликнуть на инпут, а потом на спан, то срабатывает только alert(2);

Цитата:

Сообщение от Dilettante_Pro

Если сначала кликнуть на инпут, а потом на спан, то срабатывает только alert(2);

Думаю дело в alert.

Цитата:

Сообщение от ksa

У меня не выполняется

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('body').on('keyup', '#singular-atts-list .attr-new input', function() {
		console.log(3);
	});
	$(document).on('click', '#singular-atts-list td span', function() {
		console.log(1);
	});
	$('body').on('focusout', '#singular-atts-list td', function() {
		console.log(2);
	});
});
</script>
</head>
<body>
<table class="widefat fixed striped tags">
	<tbody id="singular-atts-list">
		<tr class="column-row">
			<td class="column-drag"><i class="dashicons dashicons-editor-justify"></i></td>
			<td class="column-label">shirina</td>
			<td class="column-value"><div class="attr-new"><input type="text" /></div><span>Удалить</span></td>
			<td class="column-measure">см</td>
		</tr>
	</tbody>
</table>
</body>
</html>