ugrás a tartalomhoz

jQuery input class módosítás után nem működik a submit button

unregistered · 2016. Jan. 6. (Sze), 12.19
Sziasztok!

Olyan problémám van, hogy ha egy a submit buttonnak megváltoztatom class értékét akkor utána nem működik. Példakód:

<head>
    <script type="text/javascript">
        $(document).ready(function(){
            $("img.csere").click(function(){
                $("input.adatsubmit").addClass('adatsubmitactive');
                $("input.adatsubmit.adatsubmitactive").removeClass('adatsubmit');
            });
        });

        $(document).ready(function(){
            $(".adatsubmitactive").click(function(){
                var adat = $("#adat").val();
                var dataString = 'adat='+ adat;
                $.ajax({
                    type: "POST",
                    url: "adat_process.php",
                    data: dataString,
                    cache: false,
                    success: function(result){
                        alert('ok');
                    }
                });
            return false;
            });
        });
    </script>
</head>
<body>
    <img class="csere" src="img/csere.png" /><br />
    <br />
    <div>
        <input id="adat" type="text" value="1234567890">
        <input class="adatsubmit" type="button" value="OK">
    </div>
</body>
A buttonnak "beégetve" az "adatsubmitactive" értékkel működik de ha így jquery-vel cserélem ki akkor utána nem. Ez miért van?
Előre is köszönöm!
‹ Article help javascript segítség ›
 ■
1

A probléma az, hogy a ready()

Endyl · 2016. Jan. 6. (Sze), 12.44
A probléma az, hogy a ready() lefutásakor próbálod hozzáadni az eseménykezelőt az .adatsubmitactive osztályú elemekhez, de ilyenkor még nincs ilyen a dokumentumban; csak akkor kapja meg ezt az osztályt, ha előbb a képre kattint a felhsználó, de ez már késő.

A click() helyett használj on()-t, vagy a jQuery verziódnak megfelelő alternatíváját úgy, hogy delegated eseménykezelőd legyen a direkt helyett és akkor módosított elemeken is el tudod csípni az eseményeket.

[off]
Miért van két ready() hívás?
[/off]
2

Köszönöm

unregistered · 2016. Jan. 6. (Sze), 13.23
Köszönöm, így már tényleg működik, csak azt nem értem hogy hol volt ez leírva mert igaz még csak most ismerkedem a jquery-vel, de becsszó elolvastam a dokumentációt és nem emlékszem erre, gondolom az elején volt valahol.
A két hívás meg azért van mert a teszt oldalról másoltam be ott meg ugye kísérleteztem hogy mi lehet a gond és már kínomba ketté szedtem.
3

csak azt nem értem hogy hol

Endyl · 2016. Jan. 6. (Sze), 13.48
csak azt nem értem hogy hol volt ez leírva

Idézet a click() oldaláról:
This method is a shortcut for .on( "click", handler ) in the first two variations

Az on() oldalán pedig ezt írja:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). [...] Alternatively, use delegated events to attach event handlers.

Kiemelés tőlem.
6

Jaaaa

unregistered · 2016. Jan. 6. (Sze), 17.07
Pedig elolvastam az additional notes-t is, de valóban nem mentem tovább az on-ra... jó tanulólecke volt, köszönöm még egyszer.
4

azért nem megy, mert amikor

szabo.b.gabor · 2016. Jan. 6. (Sze), 14.41
azért nem megy, mert amikor meghívódik ez
$(".adatsubmitactive").click(function(){/* blah */});
akkor még nem ad vissza semmit a $(".adatsubmitactive") kifejezés, hiszen akkor még valóban nincs olyan. az csak akkor jön létre amikor click-elsz egyet a képre.

megoldás
//11. sor
$('div.form-wrapper').on('click','.adatsubmitactive',function(){/* blah */});

//31. sor
<div class="form-wrapper">
így az eseményfigyelőd a form-wrapper-en lesz ami már létezik az elején is, a click esemény viszont csak akkor fog lefutni, ha az esemény forrása rendelkezik az adatsubmitactive osztállyal.
5

frissíteni kellene a

szabo.b.gabor · 2016. Jan. 6. (Sze), 14.42
frissíteni kellene a böngészőt, mielőtt az ember elkezd válaszolgatni :D
7

:)

unregistered · 2016. Jan. 6. (Sze), 17.09
Igen az nem árt, de ha ez bármit is enyhít a dolgon akkor majd azt mondom hogy rólad másoltam :)