jQueryを使用して新しく作成したSVG要素にイベントをバインドする方法は？

Question

jQueryを使用して<svg>を作成し、<div>に追加しています。

append()の後にeach()を使用して<svg>にアクセスできますが、ハンドラは機能しません。あらかじめ作成しておけばそれがあります。

$(document).ready(function() { 
 
    $('#testbtm').click(function() { 
 
    var svgElement = $('<svg class="hexagon" class="ui-widget-content">\ 
 
       <text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\ 
 
       <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"></svg>'); 
 
    svgElement.children('text').text(1); 
 
    svgElement.attr("class", "hexagon ui-widget-content"); 
 
    $("#display").append(svgElement); 
 
    }); //end click 
 

 
    $('#testbtm2').click(function() { 
 
    $('.hexagon').each(function() { 
 
     $(this).children('text').text('hi'); 
 
    }); 
 
    }); // end click 
 

 
    $('.hexagon').click(function() { 
 
    $(this).children('path').css('fill', 'blue'); 
 
    }); //end click 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="display"> 
 
    <svg class="hexagon" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div> 
 

 
<button id="testbtm">test</button> 
 
<button id="testbtm2">test2</button>

Answer 1

$(selector).click(f); DOMで現在あるすべての要素のクリックハンドラを追加します。

ボタンをクリックして作成された新しい六角形は、jqueryのclick関数を呼び出すときにここにないので、clickハンドラを取得しません。作成した新しい要素（SVGであるかどうか）ごとに、これを再度実行する必要があります。

$(document).ready(function() { 
 
    function hexagonClick(){ 
 
    $(this).children('path').css('fill', 'blue'); 
 
    }; 
 
    $('#testbtm').click(function() { 
 
    var svgElement = $('<svg class="hexagon" class="ui-widget-content">\ 
 
<text fill="black" x=75 y=75 style="text-anchor: middle">1</text>\ 
 
<path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"></svg>'); 
 
    svgElement.children('text').text(1); 
 
    svgElement.attr("class", "hexagon ui-widget-content"); 
 
    $("#display").append(svgElement); 
 
    // add the onclick handler to the new element. 
 
    svgElement.click(hexagonClick); 
 
    }); //end click 
 
    $('#testbtm2').click(function() { 
 
    $('.hexagon').each(function() { 
 
     $(this).children('text').text('hi'); 
 
    }); 
 
    }); // end click 
 
    $('.hexagon').click(hexagonClick); //end click 
 
}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="display"> 
 
    <svg class="hexagon" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div> 
 
<button id="testbtm">test</button> 
 
<button id="testbtm2">test2</button>