Search code examples
twitter-bootstrapd3.jsevent-handlingbootstrap-switch

bootstrap switch d3 on change event

I'm putting together a d3 visualization that makes use of bootstrap and the bootstrap-switch libraries.

I've got a set of switches that are being generated by d3 which I'd like to listen to so that I can update the visualization based on their status; I've got an event listener on the switches but it's not doing anything: 

d3.selectAll(".input").on("change", function() {
    console.log(this)
})

http://jsfiddle.net/jy24dk20/1/

Can anyone tell me what I'm doing wrong?

Solution

  • Bootstrap switch (2.0.1, which is legacy) fires an event called switch-change, as per the docs.

    It appears that it does not change the checked state on the input and, hence, does not trigger the change event.

    I would recommend listening to the switch-change event to affect your changes:

    $('input').bootstrapSwitch().on("switch-change", function() {
    console.log(this)
})