jQuery addClass works on jsfiddle but not live

Question

I've gone through several of the questions similar to mine, and have tried to implement their solutions, but I haven't managed to get any to work.

This is the js code I am using on my live site:

jQuery(function($){
   $(".icon_circle").click(function () {
        $('circle').removeClass('clicked');
        $(this).addClass('clicked');
   });

});

Here is the jsfiddle: http://jsfiddle.net/AKXTV/3 (it is adapted from jQuery SVG removeClass())

Here is my live site: http://watchcampfire.com/pre

Edit: Looks like it isn't working in bootply either, so it may be an issue with it working alongside some Bootstrap coding. http://www.bootply.com/120685

`$('circle')` isn't a DOM object, so you can't use `removeClass()` on it. — Samsquanch, Mar 10 '14 at 20:22
Thanks guys. I will look into the errors in the console. I'm working from a ready-made-theme, so I didn't write the code. Also @Samsquanch, is there any reason why the code would then work fine in jsfiddle if `$('circle')` is not a DOM object? Sorry, I am very new to SVG and not well-versed in js. — user3389584, Mar 10 '14 at 20:40

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

I'm not seeing a place where you initialize that swiper plugin like so (according to their website):

$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

Because you don't seem to have that, that may be the cause of the Uncaught TypeError: Cannot read property 'classList' of undefined errors. Fixing that should make things work for you.

UPDATE:

I think I figured out the root cause of the problem here.

This should work:

$('.icon_circle').on('click', function() {
  $('.icon_circle').attr('class', function(index, classNames) {
      //this is sort of lazy, oh well
      return 'icon_circle';
  });  

  $(this).attr('class', function(index, classNames) {
      return classNames + ' clicked';
  });
});

There's some sort of issue with adding/removing classes on SVG elements.

More detail here: jQuery SVG, why can't I addClass?

edited May 23 '17 at 11:43

Community

1
1

answered Mar 10 '14 at 20:26

ccnokes

6,885
5
47
54

I'm actually working from an already-made-theme. From what I can see, it is being initialized from js/scripts.js. But that may be incorrect? Though, it appears the swiper is working, but still causing errors in console. – user3389584 Mar 10 '14 at 20:30
So its an issue related to adding classes to SVG elements. See: http://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass – ccnokes Mar 10 '14 at 22:02
Wow @ccnokes! Thanks! This seems pretty close. From what I can see, the black stroke gets automatically applied, rather than only appearing after clicking on the icon. http://www.bootply.com/120696 – user3389584 Mar 10 '14 at 22:31
Updated my answer above. This works for me here: http://jsfiddle.net/95ppn/ You just needed to add the new way of adding/removing a class in with the rest of your logic and the click event. – ccnokes Mar 11 '14 at 17:55
That's so awesome! Thanks! I think I just might switch back to this to complete the action. – user3389584 Mar 11 '14 at 20:26

score 0 · Answer 2 · answered Mar 10 '14 at 20:21

0

On your website,lot of JS errors are coming up which are stopping your script execution. Resolve those errors first and it should work fine.

answered Mar 10 '14 at 20:21

Ankur Aggarwal

2,993
5
30
56

score 0 · Answer 3 · answered Mar 10 '14 at 20:23

0

It might be due to some invalid markup.

If you look at your jsFiddle, you are missing closing </g> tags inside of several <svg /> tags.

You can tell because the closing </svg> tags will be red.

You also have <g id="circle"> repeated several times.

You can't have multiple elements with the same id.

answered Mar 10 '14 at 20:23

Code Maverick

20,171
12
62
114

Thanks! I have fixed the `` tags and removed the circle IDs (they were created when exporting from AI) in the live site. Unfortunately, the issue persists. – user3389584 Mar 10 '14 at 20:35

score 0 · Answer 4 · answered Mar 11 '14 at 05:22

I ended up getting a helping hand from PencilScoop.

Here's the perfect working solution that involves no JS at all.

I wrapped my SVG, like so:

<input type="radio" id="v" name="button" value="video">
<label for="v">
<!-- SVG CODE -->
</label>

Then added this to the CSS:

input[type="radio"]:checked + label #shape_ID {
    stroke: #EF4137
}

See working code here: http://jsfiddle.net/3KnXF/5

jQuery addClass works on jsfiddle but not live

4 Answers4