Bootstrap dropdown click action
Hi allemaal,
Ik ben met een dynamische tabel bezig waar vooraf al data in kan staan, en via jquery data toevoeg en verwijder.
Nou voorzie ik elke regel van een bootstrap dropdown menu met een keuze om te verwijderen.
Omdat ik lui ben gebruik ik jquery om het regelnummer en de 'key' te vinden om te verwijderen of aan te passen.
Hiervoor heb ik een click event toegevoegd aan de dropdown knop:
Nou zit ik met het volgende, deze functie werkt maar 1 keer...
Zelfs als ik in dezelfde functie hierin toevoeg als $(this).click(function() { ... });
Heeft iemand hier ervaring mee ? :D
Toevoeging op 07/11/2018 21:25:02:
Ik vind het zelf toevoegen van de dropdown show, en de hide, en hide als er buiten het menu geklikt wordt en/of op een link in de dropdown en alle classes en aria's terugplaatsen veel te veel werk en veel te veel gerommel in de m'n code.
Ik ben met een dynamische tabel bezig waar vooraf al data in kan staan, en via jquery data toevoeg en verwijder.
Nou voorzie ik elke regel van een bootstrap dropdown menu met een keuze om te verwijderen.
Omdat ik lui ben gebruik ik jquery om het regelnummer en de 'key' te vinden om te verwijderen of aan te passen.
Hiervoor heb ik een click event toegevoegd aan de dropdown knop:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).on('click', 'button.dropdown-toggle', function(event) {
var mContainer = $(this).closest('.data-card');
var findIn = '#' + $(mContainer).attr('id') + ' .row';
tRow = $(findIn).index($(this).closest('.row'));
console.log(tRow);
});
var mContainer = $(this).closest('.data-card');
var findIn = '#' + $(mContainer).attr('id') + ' .row';
tRow = $(findIn).index($(this).closest('.row'));
console.log(tRow);
});
Nou zit ik met het volgende, deze functie werkt maar 1 keer...
Zelfs als ik in dezelfde functie hierin toevoeg als $(this).click(function() { ... });
Heeft iemand hier ervaring mee ? :D
Toevoeging op 07/11/2018 21:25:02:
Ik vind het zelf toevoegen van de dropdown show, en de hide, en hide als er buiten het menu geklikt wordt en/of op een link in de dropdown en alle classes en aria's terugplaatsen veel te veel werk en veel te veel gerommel in de m'n code.
Gewijzigd op 07/11/2018 21:10:55 door Dennis WhoCares
Wat je mogelijk nodig hebt is een delegated event handler. Dit is in wezen een indirect gekoppelde event handler die uitgaat van een container waarin dynamisch toegevoegde elementen zitten.
Dus als je zoiets hebt:
Zou dat moeten werken.
Dus als je zoiets hebt:
Code (php)
1
2
3
4
5
2
3
4
5
$().ready(function() {
$('#container').on('click', 'a.class', function(e) {
// do stuff
});
});
$('#container').on('click', 'a.class', function(e) {
// do stuff
});
});
Zou dat moeten werken.
Gewijzigd op 07/11/2018 22:50:37 door Thomas van den Heuvel
Hi Thomas,
dit heb ik inderdaad ook geprobeerd met simpelweg 'body' als de "container", maar ook dit mocht niet baten, het is alsof de click event unbind() wordt
Wel als ik event.stopPropagation() toepas, maar dan werkt de dropdown niet meer ;-)
Dan moet ik handmatig de dropdown's container, dropdownmenu en knop classes en aria's bijwerken. En ook als ik ergens anders op klik dan de dropdown knop zelf alles weer terug plaatsen -_-
Ik hoopte dat iemand hier dit probleem ook heeft, wellicht is het een bootstrap4 dingetje...
Ik zal de click event wel een beetje aanpassen naar de linkjes in de dropdown zelf. Wel irritant, maar heb maar 3 acties: copy/clone,delete,edit dus dat scheelt dan wel
dit heb ik inderdaad ook geprobeerd met simpelweg 'body' als de "container", maar ook dit mocht niet baten, het is alsof de click event unbind() wordt
Wel als ik event.stopPropagation() toepas, maar dan werkt de dropdown niet meer ;-)
Dan moet ik handmatig de dropdown's container, dropdownmenu en knop classes en aria's bijwerken. En ook als ik ergens anders op klik dan de dropdown knop zelf alles weer terug plaatsen -_-
Ik hoopte dat iemand hier dit probleem ook heeft, wellicht is het een bootstrap4 dingetje...
Ik zal de click event wel een beetje aanpassen naar de linkjes in de dropdown zelf. Wel irritant, maar heb maar 3 acties: copy/clone,delete,edit dus dat scheelt dan wel
Gewijzigd op 08/11/2018 07:11:52 door Dennis WhoCares
Als ik het goed begrijp doet Bootstrap zelf niets met events, het is aan de gebruiker om deze zelf toe te voegen. Als dit zo is, zou er dus ook niets in de weg moeten staan.
Mogelijk is het volgende aan de hand:
Zoals hier beschreven wordt.
In het meest ideale geval komt het toch neer op het nalopen van je selectors etcetera. Misschien kun je iets met e.currentTarget zoals in het eerdere gelinkte topic wordt aangehaald. Ook zou je stap voor stap na kunnen gaan wat wel en niet lukt door wat berichten in je console te dumpen met console.log() en e.e.a. na te lopen met de inspector van je browser om dingen uit te sluiten.
EDIT: ik neem ook aan dat je fouten in JavaScript of de HTML-structuur hebt uitgesloten. Mogelijk gaat er iets op een andere plaats stuk waardoor het niet werkt.
Mogelijk is het volgende aan de hand:
Quote:
You might not be setting your anchor's id correctly, or you might be binding before the elements exist - I highly recommend using jQuery's on in this case.
Zoals hier beschreven wordt.
In het meest ideale geval komt het toch neer op het nalopen van je selectors etcetera. Misschien kun je iets met e.currentTarget zoals in het eerdere gelinkte topic wordt aangehaald. Ook zou je stap voor stap na kunnen gaan wat wel en niet lukt door wat berichten in je console te dumpen met console.log() en e.e.a. na te lopen met de inspector van je browser om dingen uit te sluiten.
EDIT: ik neem ook aan dat je fouten in JavaScript of de HTML-structuur hebt uitgesloten. Mogelijk gaat er iets op een andere plaats stuk waardoor het niet werkt.
Gewijzigd op 08/11/2018 11:13:13 door Thomas van den Heuvel
Hi Thomas,
de selectors zijn correct, maar mijn eigen functie triggered maar 1 keer. Daarna niet meer alsof bootstrap zelf 'eventuele' andere functies unbind.
De popup blijft wel werken.
Maar ik heb het al opgelost door de index lookups toe te voegen aan elke .copy, .edit en .delete link binnenin de popup.
Thanks!
de selectors zijn correct, maar mijn eigen functie triggered maar 1 keer. Daarna niet meer alsof bootstrap zelf 'eventuele' andere functies unbind.
De popup blijft wel werken.
Maar ik heb het al opgelost door de index lookups toe te voegen aan elke .copy, .edit en .delete link binnenin de popup.
Thanks!




