I am creating an <svg>
using jQuery, and appending it to a <div>
.
I can access the <svg>
by using each()
after append()
, but the handler doesn't work. If I create it beforehand, it does.
$(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>
$(selector).click(f);
adds a click handler for all the elements that are currently in the DOM.
Because the new hexagon created by clicking on the button is not here at the time you call jquery's click
function, it does not get a click
handler. You need to do this again for each new element you create (that it is an SVG or not).
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.