jQuery SVG を使用しています。オブジェクトにクラスを追加または削除できません。私の間違いを知っている人はいますか?
SVG:
<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />
クラスを追加しない jQuery:
$(".jimmy").click(function() {
$(this).addClass("clicked");
});
オブジェクトをターゲットにしてクリック時にアラートを発生させることができるので、SVG と jQuery がうまく連携していることがわかります。
$(".jimmy").click(function() {
alert('Handler for .click() called.');
});
ベストアンサー1
2016 年編集: 次の 2 つの回答を読んでください。
- JQuery 3は根本的な問題を修正しました
- Vanilla JS:
element.classList.add('newclass')最新のブラウザで動作します
JQuery (3 未満) では SVG にクラスを追加できません。
.attr()SVG で動作します。jQuery に依存したい場合は、次の手順に従ってください。
// Instead of .addClass("newclass")
$("#item").attr("class", "oldclass newclass");
// Instead of .removeClass("newclass")
$("#item").attr("class", "oldclass");
jQuery に依存したくない場合は、次のようにします。
var element = document.getElementById("item");
// Instead of .addClass("newclass")
element.setAttribute("class", "oldclass newclass");
// Instead of .removeClass("newclass")
element.setAttribute("class", "oldclass");