CODEWITHSUNDEEP
javascriptjquery
user3389584
user3389584

Reputation: 135

jQuery addClass works on jsfiddle but not live

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

Upvotes: 0

Views: 299

Answers (4)

ccnokes
ccnokes

Reputation: 7115

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?

Upvotes: 1

user3389584
user3389584

Reputation: 135

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

Upvotes: 0

Code Maverick
Code Maverick

Reputation: 20415

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.

Upvotes: 0

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

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.

Upvotes: 0

Related Questions