Форум

tk.stas · #1 (**permalink**) 17.04.2016, 18:49

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

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

<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);
});

рони · #2 (**permalink**) 17.04.2016, 18:55

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>

tk.stas · #3 (**permalink**) 17.04.2016, 19:20

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

tk.stas · #4 (**permalink**) 07.10.2016, 11:15

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

рони · #5 (**permalink**) 07.10.2016, 11:58

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

tk.stas · #6 (**permalink**) 31.10.2016, 17:27

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

видимо не очень поняли ... 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 так можно сделать?

рони · #7 (**permalink**) 31.10.2016, 18:03

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript