Question

我正在使用jQuery创建<div>，并将其附加到<svg>。

我可以在each()之后使用append()访问$(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，但处理程序无效。如果我事先创建它，它确实如此。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 1

$(selector).click(f);为DOM中当前的所有元素添加了一个点击处理程序。

因为在你调用jquery的click函数时点击按钮创建的新六边形不在这里，所以它没有得到click处理程序。您需要为您创建的每个新元素（它是否为SVG）再次执行此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery将事件绑定到新创建的SVG元素？

1 个答案: