Javascript-форум - Выдрать текст из блока

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

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выдрать текст из блока (https://javascript.ru/forum/misc/62577-vydrat-tekst-iz-bloka.html)

Выдрать текст из блока

Всем привет! Проблема такая: необходимо выдрать текст из блока по клику на кнопку "Отправить" выбранного блока.

Запутался уже как составить порядок селекторов в скрипте.

<div class="card">
			  <div class="card-content">
				   <div class="card-content-inner">Текст 1</div>
			  </div>
			  <div class="card-footer">
				  <label class="label-radio item-content">
					<input type="checkbox" name="ks-checkbox" value="Сhecked0" checked="checked">
					<div class="item-media"><i class="icon icon-form-radio"></i></div>
				  </label><a href="#" class="link">Отправить</a></div>
			</div>
<div class="card">
			  <div class="card-content">
				   <div class="card-content-inner">Текст 2</div>
			  </div>
			  <div class="card-footer">
				  <label class="label-radio item-content">
					<input type="checkbox" name="ks-checkbox" value="Сhecked0" checked="checked">
					<div class="item-media"><i class="icon icon-form-radio"></i></div>
				  </label><a href="#" class="link">Отправить</a></div>
			</div>

$('a').on('click', function () {
var textsocial = $("this, div.card-content").text();
alert(textsocial);
});

tk.stas,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</script>
  <script>
$(function() {
    $(".card").each(function(indx, el) {
        var text = $(".card-content-inner", el).text();
        $(".link", el).on("click", function(event) {
            event.preventDefault();
            alert(text)
        })
    })
});
  </script>
</head>

<body>
<div class="card">
			  <div class="card-content">
				   <div class="card-content-inner">Текст 1</div>
			  </div>
			  <div class="card-footer">
				  <label class="label-radio item-content">
					<input type="checkbox" name="ks-checkbox" value="Сhecked0" checked="checked">
					<div class="item-media"><i class="icon icon-form-radio"></i></div>
				  </label><a href="#" class="link">Отправить</a></div>
			</div>
<div class="card">
			  <div class="card-content">
				   <div class="card-content-inner">Текст 2</div>
			  </div>
			  <div class="card-footer">
				  <label class="label-radio item-content">
					<input type="checkbox" name="ks-checkbox" value="Сhecked0" checked="checked">
					<div class="item-media"><i class="icon icon-form-radio"></i></div>
				  </label><a href="#" class="link">Отправить</a></div>
			</div>


</body>
</html>

Вот оно как. Спасибо!

А если страница была создана динамически?Как отследить клик по кнопки, понятно. А вот .each никак не хочет работать.

Цитата:

Сообщение от tk.stas

Как отследить клик по кнопки, понятно.

видимо не очень поняли ... body лучше заменить на ближайший постоянный родитель ".card",

$(function() {
    $("body").on("click", ".card", function(event) {
        var a = $(".card-content-inner", this).text();
        $(event.target).is(".link") && (event.preventDefault(), alert(a))
    })
});

Цитата:

Сообщение от рони (Сообщение 430955)

видимо не очень поняли ... body лучше заменить на ближайший постоянный родитель ".card",

$(function() {
    $("body").on("click", ".card", function(event) {
        var a = $(".card-content-inner", this).text();
        $(event.target).is(".link") && (event.preventDefault(), alert(a))
    })
});

А на чистом js так можно сделать?

Цитата:

Сообщение от tk.stas

А на чистом js так можно сделать?

да читать делегирование

jquery тоже чистый js :)