BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQuery - remove()が動作しない

2022-02-13 18:01:58

質問

マウスの位置に応じてdivを配置するスクリプトがあるのですが、quot;Clear"というボタンがあり、それを使って作成したdivをクリアしたいのです。 どうすれば実現できますか？

私が書いたスクリプトとソースです。

HTML 

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script src="bhaiya.js"></script>
        <button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button>
    </body>
</html>

ジャクエリ 

$(document).ready(function(){

    $(this).mousedown(function(e){
        $x = e.pageX;
        $y = e.pageY;

        $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    function clear() {
        $(".theDiv").remove();
    }

})

jsFiddleです。 http://jsfiddle.net/BpAYz/

何かお手伝いいただけると助かります :)

解決方法は？

インライン html 属性イベントハンドラで呼び出せるのは グローバル 関数を使用します。あなたの clear() 関数は ではない グローバルに定義されているため 内部 ドキュメントレディハンドラで onclick="clear()" を見つけることができません。この関数をreadyハンドラの外に移動させるか（グローバルにする）、より良い方法は、クリックをjQueryでバインドすることです。 

$(document).ready(function(){    
    $(this).mousedown(function(e){
        var $x = e.pageX;
        var $y = e.pageY;    
        var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    $(".clear").click(function () {
        $(".theDiv").remove();
    });
});

また var は、マウスダウンハンドラの変数の前に置かれます。 var グローバル変数になるため、エラーが発生しやすくデバッグがしにくいコードになります。(ただし、なぜ が必要です。 グローバルになるのか?）

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します