Javascript op toegevoegde HTML aan de hand van AJAX (via PHP) werkt niet.

Door Joep - op 25-06-2015 20:47

1.335 views

Hallo Allemaal,
Ik ben bezig met een soort systeempje voor het bijhouden van voorraden.
Hierin zit onder andere een search die je pagina niet refresht (via ajax -> PHP -> terugkoppeling):

(PHP gedeelte wat terugkomt)

(JQuery gedeelte dat tabelrijen toevoegd aan de tabel)

Dit werkt allemaal.
Alleen probeer ik nu JQuery toe te voegen aan de toegevoegde tabelrijen via AJAX en reageren deze niet.
Als ik het op met de hand toegevoegde tabelrijen probeer lukt het wel.

(JQuery)

Dit komt dus hoogstwaarschijnlijk doordat JQuery niet op deze manier kan uitgevoerd worden op HTML dat is toegevoegd via AJAX.
Iemand die hier toch een oplossing voor heeft?

Groet,
Joep de Jong

Thomas van den Heuvel

25-06-2015 21:23 gewijzigd op 25-06-2015 21:38

Je hangt daar een click-event aan bestaande tabelrijen. Als je later rijen toevoegt hebben deze nieuwe rijen niet automagisch deze click-events nee. Je kunt dit oplossen door .on('click') te gebruiken (of een soortgelijke syntax, het gaat in ieder geval om die .on). Met deze constructie kun je events aan bestaande en mogelijk in de toekomst geintroduceerde elementen hangen.

Omdat "tr" nogal breed is doe je er verstandig aan om een soort van container te definieren om je tr-gebied-waar-je-clickevents-aan-wilt-hangen af te bakenen. Dit kunnen bijvoorbeeld een of meer specifieke tabellen zijn die je identificeert met een class. Dit principe heet delegated event approach als ik mij niet vergis.

Als je dus zoiets doet:

$('table.clickable tr').on('click', function() {
    // stuff
});

Dan zou het click event moeten werken voor alle bestaande EN toekomstig geintroduceerde tr-elementen van tables met class "clickable".

Het heeft daarbij dus de voorkeur om dit gebied zo precies mogelijk af te bakenen (zo dicht mogelijk te zetten bij de HTML elementen waar het om te doen is, en niet 10 niveau's hoger in je hierarchie).

J Joep -

25-06-2015 21:45 gewijzigd op 25-06-2015 22:03

Thomas,
Bedankt voor je reactie!
Het werkt echter nogsteeds niet.

$('tr').on('click', function() {
    alert('test');
});

geeft zelf ook geen antwoord zodra ik op de row click...
Voor de rest ook geen JS errors o.i.d.

Enig idee waar het dan aan kan liggen?

Groet,
Joep

Thomas van den Heuvel

26-06-2015 02:00

Ah, probeer het zo eens:

$('table.identifier').on('click', 'tr', function() {
    // stuff
});

Dat werkt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.on test</title>
<style type="text/css">
table.clickable             { border-collapse: collapse; }
table.clickable tr          { border: 5px solid #ff0000; background-color: #ffcccc; }
table.clickable tr.active   { background-color: #ccccff; }
table.clickable tr td       { width: 250px; height: 50px; line-height: 50px; text-align: center; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
<table class="clickable">
    <tr><td>click me</td></tr>
    <tr><td>click me</td></tr>
    <tr><td>click me</td></tr>
</table>
<button type="button" id="addRowButton">add row</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('table.clickable').on('click', 'tr', function() {
        $(this).addClass('active');
    });

    $('#addRowButton').click(function() {
        // of dit nu via AJAX binnenkomt of op een andere manier wordt toegevoegd is verder niet relevant
        $('table.clickable').append('<tr><td>click me too</td></tr>');
    });
})
//]]>
</script>
</body>
</html>

J Joep -

30-06-2015 09:15

Top! het was gelukt hoor!

Reageren

Inloggen om te reageren