jQuery script/functies opnieuw initieren
ik maak gebruik van dynatable.js
Dynatable, maakt een dynamisch tabel, van de data die ik in de tabel heb gezet.
O.a. paginering, sorteren, filteren enz.
Zodra dynatable klaar is, en ik verander van pagina o.i.d (iets wat de huidige content van dynatable aanpast) lijkt het alsof alle attributen van mijn data is weg gehaald. Wat niet zo fijn is voor m'n knopjes per record.
Is het mogelijk om je jquery script nogmaals te laten uitvoeren om alle 'bindings' (is dat wel het juiste woord?) na te lopen?
Ik bedoel dus, de functies die ik heb gemaakt zoals:
Code (php)
1
2
3
2
3
$('.delete').on('click', function(event) {
...
});
...
});
Die werken niet meer, nadat ik een filter of wat dan ook gedaan heb. (Zodra de pagina zelf ingeladen is werkt het nog wel, maar na een actie van dynatable niet meer, inspector laat nog wel gewoon nog class="delete" zien)
Gewijzigd op 12/07/2016 16:06:40 door Dennis WhoCares
Gewijzigd op 12/07/2016 16:22:17 door Thomas van den Heuvel
ik heb hier inderdaad naar gekeken, maar kan er niks van vinden:
https://www.dynatable.com/
Hetzelfde geldt voor opmaak van je 'rows' of kolommen, daar moet je iets omheen bouwen door jquery script na processing.
ook op de github heb ik niks kunnen vinden.
Maar is het niet mogelijk om m'n jquery functies opnieuw te binden na de 'processing' ?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function bind_delete_buttons() {
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
Code (php)
1
2
3
2
3
$(document).on('click', '.delete', function(event) {
...
});
...
});
Toevoeging op 12/07/2016 19:06:48:
dus "document" luistert naar de click event. En dan wordt er gekeken of het geklikte element van de class .delete was.
met de oorspronkelijke opzet wordt aan alle, op dat moment aanwezige, elementen van de class .delete een listener gehangen.
die verdwijnt mogelijk tussentijds als de elemnten verwijderd en weer aangemaakt worden, of toegevoegd worden. In zo'n geval kun je de listener beter een stukje hoger in de boom hangen. Aan document, of eventueel een element dat zeker steeds aanwezig blijft en waaronder de betreffende buttons staan in de DOM
Frank Nietbelangrijk op 12/07/2016 18:20:41:
Je moet de code dan iets uitbreiden. Een mogelijke oplossing is een extra functie die eerst alle bestaande "click event handlers" op de delete-buttons wist en vervolgens alle delete-buttons opnieuw een "click event handler" geeft.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function bind_delete_buttons() {
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
Ivo P op 12/07/2016 19:03:28:
Toevoeging op 12/07/2016 19:06:48:
dus "document" luistert naar de click event. En dan wordt er gekeken of het geklikte element van de class .delete was.
met de oorspronkelijke opzet wordt aan alle, op dat moment aanwezige, elementen van de class .delete een listener gehangen.
die verdwijnt mogelijk tussentijds als de elemnten verwijderd en weer aangemaakt worden, of toegevoegd worden. In zo'n geval kun je de listener beter een stukje hoger in de boom hangen. Aan document, of eventueel een element dat zeker steeds aanwezig blijft en waaronder de betreffende buttons staan in de DOM
Code (php)
1
2
3
2
3
$(document).on('click', '.delete', function(event) {
...
});
...
});
Toevoeging op 12/07/2016 19:06:48:
dus "document" luistert naar de click event. En dan wordt er gekeken of het geklikte element van de class .delete was.
met de oorspronkelijke opzet wordt aan alle, op dat moment aanwezige, elementen van de class .delete een listener gehangen.
die verdwijnt mogelijk tussentijds als de elemnten verwijderd en weer aangemaakt worden, of toegevoegd worden. In zo'n geval kun je de listener beter een stukje hoger in de boom hangen. Aan document, of eventueel een element dat zeker steeds aanwezig blijft en waaronder de betreffende buttons staan in de DOM
Frank, bedankt voor het voorbeeld, ik denk dat ik hier wel iets mee kan in de zogenaamde ':afterProcess' 'hook'
Ik zal er is naar kijken.
Ivo, ik ben niet bekend met de term 'DOM'. Heb je hier enige voorbeeld van?
Zou dat betekenen, dat o.a. met dynamisch aanmaken van delete knoppen o.i.d. dat je maar 1-malig in de 'DOM' je functie hoef te maken, en niet meer bang hoeft te zijn/niet meer opnieuw hoeft te initieren??
Anyways, enorm bedankt! Ik ga hier morgen vroeg gelijk naar kijken :)
Frank Nietbelangrijk op 12/07/2016 18:20:41:
Je moet de code dan iets uitbreiden. Een mogelijke oplossing is een extra functie die eerst alle bestaande "click event handlers" op de delete-buttons wist en vervolgens alle delete-buttons opnieuw een "click event handler" geeft.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function bind_delete_buttons() {
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
$('.delete').off('click').on('click', function(event) {
...
});
}
// Execute this function as soon the page has been loaded
$(function() {
// bind click handler on delete buttons
function bind_delete_buttons();
// example function that adds a new delete button
$('.add_row').on('click', function(event) {
// append a new button to the page
$('body').append('<button class="delete">Delete</button>');
// and unbind and bind the event handlers again
function bind_delete_buttons();
});
});
Inderdaad werkt deze methode perfect als ik dus de 'bind' uitvoer in afterProcess functie van Dynatable. :-)
Ivo P op 13/07/2016 09:06:20:
Yes, hiermee hoef ik nieteens de afterprocess te gebruiken om te binden!
Geweldig!
Enorm bedankt heren, jullie allebij