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>


<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!

■

HTML, CSS, JavaScript, Ajax

csirip

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]

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

$(".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">

//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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

:)

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 :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés