Door
Dennis WhoCares
op 12-07-2016 16:06
gewijzigd op 12-07-2016 16:06
1.503 views
Hi allemaal,
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:
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)
Is dat de juiste manier om events in te laten haken op onderdelen van tabellen die van dynatable.js gebruik maken of heeft deze lib haar eigen manier voor "event hooks"? Heb je hier al naar gezocht in documentatie? En je bent vast niet de enige die zoiets wil(de), dus anderen zullen hier ongetwijfeld ook tegenaan gelopen zijn.
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.
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();
});
});
[size=xsmall]Toevoeging op 12/07/2016 19:06:48:[/size]
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
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.
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();
});
});
[size=xsmall]Toevoeging op 12/07/2016 19:06:48:[/size]
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 :)
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.
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. :-)
