Форум

Янковиц · #1 (**permalink**) 18.02.2019, 18:41

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

<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?

ksa · #2 (**permalink**) 19.02.2019, 08:34

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

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

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

<!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>

Dilettante_Pro · #3 (**permalink**) 19.02.2019, 11:31

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

Nexus · #4 (**permalink**) 19.02.2019, 11:52

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript