Using JQuery I am not able to remove class and add class to my SVG

Question

I am trying to use the JQuery click event to remove a class and add a different class but my SVG object is not changing the fill as expected.

 $(".seat").click(function (event) {
      var result = $(this).data("seat");
      var state = $(this).data("state");
      $(this).removeClass( "seat" ).addClass( "taken" );
       result = result +" - "+ state;
       $("#statusBox").html(result);

       });

My JS fiddle is Here

Your answer can be found here: http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass — John, Apr 21 '14 at 22:01

score 2 · Accepted Answer · answered Apr 21 '14 at 22:01

Unfortunately, class does not work the same for SVG tags as it does for standard HTML, at least in respect to jQuery. Rather than treat it as you would a class, you need to treat it like an attribute.

$(".seat").on('click',function(e){
    var $this = $(this),
        $data = $this.data();

    $this.attr('class','taken');

    $("#statusBox").html($data.seat +" - "+ $data.state);
});

Since you were removing the only class present and giving it a new class, I simply assigned the attribute of class the new value of taken. If your actual code is more complex with multiple classnames, you may need to get creative, but the concept remains the same ... replacing that part of the attribute's string value.

I also updated your code to be a bit more efficient, hope thats cool. Here is the working jsFiddle.

score 0 · Answer 2 · answered Apr 21 '14 at 22:01

I don't think addClass() or removeClass() work with svg. If I remember correctly you'll need to use .attr()

Demo Fiddle

JS:

$(".seat").click(function (event) {
       var result = $(this).data("seat");
       var state = $(this).data("state");
       $(this).attr('class', 'taken');
       result = result +" - "+ state;
       $("#statusBox").html(result);                     
});

Using JQuery I am not able to remove class and add class to my SVG

2 Answers2