Using jQuery find to target SVG elements fails in IE only

Question

I'm setting and removing a class on a 'circle' element inside an SVG block with jQuery. This works in all recent browsers I've tested but results in an error in IE (9 & 10, possibly all of them).

jQuery(document).ready(function($) {
  console.log('Console running');
  var $circle = $('svg circle'),
    clicked = false;
  $circle.on({
    click: function(e) {
      setClick($(this));
    }
  });
  function removeClick(callback) {
    $('svg').find('.clicked').removeAttr("class");
    console.log('clicked removed');
    callback();
  }
  function setClick($this) {
    removeClick(function() {
      $this.attr("class", "clicked").queue(function() {
        console.log('clicked added');
        clicked = true;
      }).dequeue();
    });
  }
});

circle.clicked {
  fill:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pseudo-page cf">
  <div class="svg-container" style="position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%;">
    <svg style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" x="0" y="0" fill="#cccccc" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 350" xml:space="preserve">
      <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
      <g>
        <circle cx="30" cy="25" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
        <circle cx="80" cy="30" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
        <circle cx="50" cy="60" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
      </g>
    </svg>
  </div>
</div>

This is part of a much larger script that takes into account lots of other actions. I've stripped out the relevant and error-inducing bits.

In IE, the 'find' line results in the error:

SCRIPT438: Object doesn't support property or method 'getElementsByClassName'
jquery.min.js, line 2 character 6670

Is there a better or correct way to search for all elements with the 'clicked' class? By the way, I'm not using this to style elements, I only added the green style to make it obvious that it's worked or not.

Thanks!

Answer 1

Thanks to @Marlin I found working solution for you. Instead of:

$('svg').find('.clicked').removeAttr("class");

use

$('svg').find('[class=clicked]').removeAttr("class");

jQuery won't use getElementsByClassName for elements selection inside SVG object (https://github.com/jquery/sizzle/issues/322).

Answer 2

In IE getElementsByClassName is available on the document, but not on SVG Elements.

What about jQuery won't fix clause: https://github.com/jquery/sizzle/issues/322