Как выхватить нужное значение input по клику?

Question

[Константин Савинов]

Есть JS-код:

<script type="text/javascript">
function openAlbum()
{
$("#tracks").html('<center>Some text...</center>');
var uid = $("#uid").val();

       $.ajax({
                type: "POST",
                url: "s.php",
                data: "uid="+uid,
                success: function(html) {
                        $("#results").empty();
                        $("#results").append(html);
                }
        });
}
</script>

Также по циклу выводится следующий код:

for ($i = 0; $i < count($searchAlbum); $i++) {
echo '<div id="cover"><form action=""><input type="hidden" id="uid" value="'.str_replace('https://example.com/', '', $searchAlbum[$i]->href).'"/><a href="#" onclick="openAlbum();"><img src="'.$searchAlbum[$i]->images[1]->url.'"/></a><br><br><span>'.$searchAlbum[$i]->name.'</span><input type="submit" style="position: absolute;;left: -99999px;" /></form></div>';
}

Проблема: сейчас по клику выхватывается значение только первого input на странице с id="uid".

Как сделать так, чтобы в переменную uid попадало value из того div, в котором нажали ссылку?

Answer 1

[twixoff]

Если вы добавляете объекты DOM динамически, то .click() тут не пойдет - он не привязывается к новосозданным элементам.
Вам необходимо использовать .on()

Comments

[Константин Савинов]

Прописал вместо .click – .on('click', ...
Всё равно null.

[twixoff]

у вас вызвается функция openAlbum() по клику. Так передавайте в эту функцию нужное вам значение - openAlbum(uid).

[Константин Савинов]

twixoff: Из всех предложенных вариантов ваш последний комментарий помог прийти к самому простому и удобному решению. Не с первого раза, но потом нашел свою ошибку. Спасибо большое за помощь!

[twixoff]

Константин Савинов: Рад, что помог. Пометьте как решение мой ответ.

Answer 2

[Максим]

Вот так, вроде бы, правильно
html:

<div id="inputs">
   <input class="my-input" type="text" name="name_1">
   <input class="my-input" type="text" name="name_2">
   <input class="my-input" type="text" name="name_3">
   ...
   <input class="my-input" type="text" name="name_N">
</div>

js:

var id = null;
$('#inputs').on('click','.my-input',function() {
    id = $(this).val();
});

Comments

[Константин Савинов]

Не срабатывает. Переменная uid так и остается null.

Answer 3

[Sergey Lysogor]

А пробовали использовать селектор класса вместе с .on?

Answer 4

[Viktor Vsk]

Помоему, кто-то забывает, что значит id\uid\идентификатор. Как в лингвистике, так и в html.
Это уникальное значение.

Comments

[Константин Савинов]

Я это понимаю. Я могу дать названия каждому инпуту в духе uid1, uid2 и т.д.
Вопрос в другом: как мне в этом случае передать значение в переменную? Если таких инпутов на странице 12 штук.

[Viktor Vsk]

Константин Савинов: логично предположить, что нужно не айдишники использовать.
Добавляете инпута класс album, и data-аттрибут:

<input class='album' data-id="1" />
<input class='album' data-id="2" />
<input class='album' data-id="3" />
<input class='album' data-id="12" />

И ловите событие:

$('.album').click(function(){ console.log($(this).data('id'); });

Плюс, не забываем, если что, оборачивать всё в:
$(document).ready(function(){ ... });