How to bind events to a newly created SVG element using jQuery?

Question

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>

I would be pretty sure its because you should be using .on http://api.jquery.com/on/ to bind your click handler to something that has not yet been created. — dmoo, May 01 '16 at 10:15
Yep. Try this answer >> http://stackoverflow.com/questions/28052506/function-doesnt-work-after-appending-new-element — , May 01 '16 at 10:15

Quentin Roy · Accepted Answer · 2016-05-06T00:15:35.340

$(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>

How to bind events to a newly created SVG element using jQuery?

1 Answers1