0

現在のページの jQuery が機能します。

次を使用して、現在のページの div にリモート ページをロードしました。

<div class="row-fluid">
    <ul class="nav nav-tabs">
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu1">menu1</a></li>
        <li><a data-toggle="tab" id="spotlight" href="#" data-hvalue="menu2">menu2</a></li>
    </ul>
</div>
<div class="showroom" id="showroom"></div>
    <script>
        $('a#spotlight').click(function () {
        $(this).each(function (){
            if($(this).data('hvalue')=="menu1"){
                $.getScript( "http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js", function() {
                     alert('Load was performed.');
                 });
            }
            var temp = $(this).data('hvalue') + " #page";
            $('#showroom').load(temp);
        });
    });
    </div>
</script>

リモート ページには次のコードがあります。

<div class="container-fluid" id="page">
    <div class="row-fluid">
        <button id="DrawItem">Draw Item</button>
        <div id="canvases">
            <canvas width="640" height="480"></canvas>
        </div>
    </div>
</div>

最初に、次のスニペットをリモート ページに配置しました。 $(document).ready(function() { $('a#DrawItem').click(function(){ $("canvas").drawArc({ fillStyle: "黒", x: 100, y: 100, 半径: 50 }); }); }); しかし、それはうまくいきません。キャンバスと jcanvas.min.js スクリプトを同じページに配置すると、すべてが機能します。リモート ページからキャンバスを読み込もうとしても、うまくいきません。

4

1 に答える 1

1

その時点ではイベント ハンドラーが存在しないため、試みたように要素にイベント ハンドラーを割り当てることはできません。代わりに、次のようにコンテナ要素にアタッチできます...

$(document).ready(function() {
    $("#showroom").on("click", "#DrawItem", function(){
        $("canvas").drawArc({
          fillStyle: "black",
          x: 100, y: 100,
          radius: 50
        });
    });
});

これにより、 でクリック イベントがキャプチャされ#showroom、クリックが から発生した場合はイベント ハンドラーが起動され#DrawItemます。これはイベント委任であり、詳細についてはこちらをご覧ください...

http://api.jquery.com/on/

于 2013-10-02T13:43:49.200 に答える