Diskuze: Selektování tlačítka pomocí jQuery

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

tom.ondrej

Člen

tom.ondrej:27.5.2015 11:26

Ahoj,
mám problém se selektnutím jednoho specifického tlačítka. Na stránce mám přes ajax vyhledávání uživatelů stránek. Stránka mi vyhazuje výsledky: text tlačítka jako přezdívka uživatele a id jako value tlačítka:

<button value='1'>Uživatel 1</button>
<button value='2'>Uživatel 2</button>
<button value='3'>Uživatel 3</button>
<button value='4'>Uživatel 4</button>

Dále by to mělo fungovat tak, že kliknu na jedno tlačítko a tím by se mi "selektnul" ten jeden uživatel. Prostě potřebuju zjistit, na jaké z těch tlačítek jsem kliknul.
Jde to nějak?
Díky za odpovědi

Odpovědět

27.5.2015 11:26

Talk is cheap. Show me the code --- Linus Torvalds

Jurajs

Člen

Jurajs:27.5.2015 11:50

Nejsem si jistej, ale něco je zde: https://api.jquery.com/select/
Klidně mi dejte mínusku

Editováno 27.5.2015 11:51

Nahoru Odpovědět

27.5.2015 11:50

Peas

Člen

Peas:27.5.2015 11:59

Cauko je viacero moznosti ako to riesit. Aby si vedel presne definovat, na ktory button si klikol mozes:

napr. dodefinovanim onclick atributu pre buttony:

<button value='1' onclick="kliknutie(this)">Uživatel 1</button>
<button value='2' onclick="kliknutie(this)">Uživatel 2</button>
...

v JavaScripte potom:

function kliknutie(button) {
  console.log(button.innerHTML);
}
//Po kliknuti na lubovolny button sa ti do konzoly vypise obsah buttonu: Uzicatel 1, Uzivatel 2,... podla toho na ktory button si klukol.

osobne pokial nemusim tak onclick ako inline atribut nepouzivam:

dalsou moznostou je napriklad "selektnutie" DOM prvku (v nasom pripade buttony) a nastavenie pre neho event (click):
HTML ostava rovnake:

<button value='5'>Uživatel 5</button>
<button value='6'>Uživatel 6</button>

JavaScript:

$('button').on('click', function () {
  console.log(this.value);
});
//Po kliknuti na lubovolny button sa do konzoly vypise jeho value. Teda 1, 2,...

Hore uvedene priklady boli len cisto demonstracne (napr selectnut vsetky buttony pomocou jQuery $('button') nie je najidealnejsie) a dufam, ze ti pomozu pri praci.

Editováno 27.5.2015 12:00

Nahoru Odpovědět

27.5.2015 11:59

tom.ondrej

Člen

tom.ondrej:27.5.2015 12:03

Díky za odpověď,
trošku jsem to zkoumal a přišel jsem na to, že problém možná bude v tom, že se mi jednou stránka načetla -> pak jsem do ní javascriptem přidal html kód (nevím jak přes ajax tahat z php jen čistá data, tak tahám html kód, který potom pomocí .append() zapisuju do stránky) a javascipt ten kód, který jsem přidal po načtení stránky asi "nevidí".
Protože když každému tlačítku, které se mi generuje dám např. class="trida" a jedno tlačítko se stejnou class přidám do stránky "napevno", tak se mi event po kliknutí na to tlačítko přidané napevno spustí, ale při kliknutí na to tlačítko přidané javascriptem se nic nestane.
Snad to co jsem napsal dává smysl

Nahoru Odpovědět

27.5.2015 12:03

Talk is cheap. Show me the code --- Linus Torvalds

JMS

Člen

JMS:27.5.2015 12:11

Jestli jsem to pochopil správně, tak po dynamickém přidání prvku ti nefunguje třeba click event?
Jestli myslím to samé co ty, tak se to řeší takto:

$('#parent').on( 'click', '.trida', function () {
   //kod
});

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

27.5.2015 12:11

Jurajs

Člen

Jurajs:27.5.2015 12:12

Takže ty hledáš tohle asi? :

$(document).ready(function(){
 $("button").click(function(){
 $("p").append("Nejaky text");

});
});

Tak to asi nebude ono když koukam na JMS

Editováno 27.5.2015 12:12

Nahoru Odpovědět

27.5.2015 12:12

tom.ondrej

Člen

tom.ondrej:27.5.2015 12:31

Jo, myslím že myslíš to samé
Ve stránce mám:

<div class="area" style="width: 400px; float: left; margin-left: 50px; height: 400px;" id="vysledky">
<h1>Výsledky hledání</h1>
<hr>
<div id="xxx"></div>
</div>

Javascript vypadá takto:

$(document).ready(function(){
        $("#search").keyup(function(){
                var user = $(this).val();
                $.get("php/vyhledani_uzivatele.php", {user : user}).done(function( data ){
                        $("#xxx").text("");
                        $("#xxx").append(data);
                });
        });
        $(".test").click(function(){
                alert("hello world!");
        });
});

Ta php stránka, která mi vrací data z DB vypadá takto:

<?php
session_start();
include("funkce.php");
$spojeni = dbconnect();
$id = $_SESSION["id"];
$target = $_GET["user"];

if($target == ""){
        echo "";
}
else{
        $dotaz = "SELECT id, prezdivka FROM uzivatele WHERE prezdivka LIKE('%$target%') LIMIT 0,10";

        mysqli_query($spojeni, "set names 'utf8'");
        $vysledek = $spojeni->query($dotaz);

        while($pole = mysqli_fetch_array($vysledek)){
                echo "<button value='{$pole[0]}' class='test'>{$pole[1]}</button>";
        }
}

No a když si pod ten div class="area" přidám
<button class="test">Click me!</button>
tak kliknutí na ten button, který je na pevno ve stránce vyvolá alert, ale ty buttony vygenerované pomocí javascritpu ten event nevyvolají (nic se nestane, když na ně kliknu)

Editováno 27.5.2015 12:32

Nahoru Odpovědět

27.5.2015 12:31

Talk is cheap. Show me the code --- Linus Torvalds

JMS

Člen

JMS:27.5.2015 12:39

Když přepíšeš ten click event, tak jak jsem ti to psal já, tak to bude fungovat

Nahoru Odpovědět

27.5.2015 12:39

tom.ondrej

Člen

tom.ondrej:27.5.2015 12:46

Jaaj
Už sem přišel na to co je #parent a funguje to... díky moc

Nahoru Odpovědět

27.5.2015 12:46

Talk is cheap. Show me the code --- Linus Torvalds

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.

Nejčastěji vyhledáváné

Diskuze: Selektování tlačítka pomocí jQuery