<div class="snippet-code"> $(document).ready(function(){ "> <div class="snippet-code"> $(document).ready(function(){ "> <div class="snippet-code"> $(document).ready(function(){ " />

JQueryで要素を選択して単純なイベントを実行できない

JQueryのクリック機能を使用して「キャンバス」に単純なクリックイベントを作成することはできません。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
        <div id="canvas">canvas</div>
</div>
</div> </div>

「テスト」メッセージが表示されていますが、上記の機能は動作していません。 div "middle"の他の兄弟(私はテストのためにそれらを削除しようとしたので含めなかったが、それはまだ起こっている)イベントを実行できるがこのdivとinsideだけが単一のイベントを実行できない。

console.log($( "#canvas"))も試してみましたが、以下のデータが取得されました。

[div#canvas]

これが完全なHTMLです。

<!DOCTYPE HTML>
<html>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link href="/demo/resources/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="/demo/resources/themes/custom/css/custom.css" rel="stylesheet" />
<script src="/demo/resources/themes/bootstrap/js/bootstrap.min.js"></script>
        <script src="/Sketchy-demo/resources/themes/custom/js/custom.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>App Page</title>
    </head>
    <body>

        <div class="middle">
            <div id="canvas"></div>
        </div>

    </body>
</html>

custom.css

.middle{
    z-index: -1;
    position: relative;
    display: block;
    height: 88%;
    width:100%;
    top: 0px;
    left:0px;
    margin: 0px;
    background-color: transparent;
}

#canvas{
    display: block;
    position: relative;
    height: 88%;
    width: 80%;
    margin: auto;
    top: 6%;
    background-color: white;
    border: 5px dashed black;
    border-radius: 10px;

}

Below is the image of the divs:enter image description here

これは私が呼び出すことができない基本的な機能であるため、これは本当にイライラすることです。

編集する

I added a https://jsfiddle.net/5mtt2khu/

質問があれば教えてください。 ありがとうございます。

1
私はあなたのコードを実行するとき、私はアラートキャンバスと真ん中の両方をうまく得ることができます。
追加された 著者 Carsten Løvbo Andersen,
最小限、完全、検証可能な例を作成できますか。
追加された 著者 Chris G,
@bpunzalan CSSはどこにありますか?
追加された 著者 Chris G,
.middle {z-index:-1} <div> body の後ろに移動します。どうやって見つけたのか知ってる?キャンバスを右クリックして「要素の検査」を選択すると、<body> に移動しました。
追加された 著者 Chris G,
はい!ありがとうございました! :)「要素を検査する」ことについての助言をありがとう。これは将来的には本当に役に立ちます。
追加された 著者 bpunzalan,
確認するためにjsfiddleを追加しました。ありがとう
追加された 著者 bpunzalan,
スニペット上で実行されていますが、私のマシンでは動作していません。
追加された 著者 bpunzalan,
こんにちは@ChrisGさん、それがすべての情報です。ありがとう
追加された 著者 bpunzalan,
ええ、それがポイントです。それはうまくいくはずだが、私の上にはなかった
追加された 著者 bpunzalan,

5 答え

event.target 要素で行います。条件と一致します

更新されたjsフィドル

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
 alert("test");
  
  $(".middle").click(function(e) { 
if($(e.target).attr('id')== 'canvas'){
alert('canvas')
//do stuff for canvas
}
else{
 alert("middle");
//do stuff for middle
}
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">middle
  <div id="canvas">canvas</div>
</div>
</div> </div>

更新

z-index

を削除または変更します

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function() {
  alert("test");
  $(".middle").click(function(e) {
    if ($(e.target).attr('id') == 'canvas') {
      alert('canvas')
      //do stuff for canvas
    } else {
      alert("middle");
      //do stuff for middle
    }
  });
});
.middle {
 z-index:0;/*remove or change > -1*/
  position: relative;
  display: block;
  height: 88%;
  width: 100%;
  top: 0px;
  left: 0px;
  margin: 0px;
  background-color: red;
}

#canvas {
  display: block;
  position: relative;
  height: 88%;
  width: 80%;
  margin: auto;
  top: 6%;
  background-color: white;
  border: 5px dashed black;
  border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="middle">
  <div id="canvas"></div>
</div>
</div> </div>

4
追加された
@bpunzalan私は既に z-index:0 を変更するように指示しました。固定フィドル jsfiddleを参照してください。 .net/5mtt2khu/1 そして更新された答えを確認してください
追加された 著者 prasanth,
ブラウザの F12 モードをチェックする console.log()を追加しました。またはconsole.logを alert()に変更します。最新の回答を見る
追加された 著者 prasanth,
しかし、そのスニペットでの作業はjqueryリンクをチェックするか、 e ではなく e ではなく event eではなく event.target で試してください。ターゲット
追加された 著者 prasanth,
まだ出力されません。
追加された 著者 bpunzalan,
これは正しいです!ありがとう@prasad。それは今うまくいきます。
追加された 著者 bpunzalan,
確認するためにjsfiddleを追加しました。ありがとう
追加された 著者 bpunzalan,
スニペットでは実行されていますが、ワークスペースでは動作していません
追加された 著者 bpunzalan,
まだ出力されていません。 (e)何も返さない。
追加された 著者 bpunzalan,

あなたのコードはうまくいくようです。

だから問題は他のものから来る必要があります。いくつかの可能性があります:

  • JQueryが正しくインストールされていません
  • 以前にJavaScriptエラーが発生したため、これは実行されません
  • イベントハンドラを読み込んだ後、htmlが動的に追加されます。
  • 同じIDを持つ他のdivがどこかにあります

あなたのHTMLが動的に追加されている場合、私はあなたにこのようなことをすることを勧めます

$(document).ready ( function() {
    $(document).on ("click", "#canvas", function() {
        alert("canvas");
    });

    $(document).on ("click", "#middle", function() {
        alert("middle");
    });

});

複数の "キャンバス" IDがある場合は、次のようにすることができます。

$("[id=canvas]").click(function() {
    alert("canvas");
});
2
追加された
確認するためにjsfiddleを追加しました。ありがとう
追加された 著者 bpunzalan,

あなたのjQueryコードは実際にそれがあるべきようにうまく働いています。キャンバスには高さと幅が定義されていないので、ここでの問題はおそらく考えられます。 下記のコードスニペットのようにdivに高さと幅を与えると、jQueryが正しく実行されることがわかります。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle" style="border: 1px solid black; height: 50px; width: 100px;">
        <div id="canvas" style="border: 1px solid red; height: 15px; width: 30px;"></div>
</div>
</div> </div>

1
追加された

私はあなたがこのようなものを探していると思います:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(document).ready(function(){
  alert("test");

  $("#canvas").click(function(e){
      alert("canvas");
      e.stopPropagation();
  });
  $(".middle").click(function(){
      alert("middle");
  });
});
.middle {
  width: 200px;
  height: 200px;
  background: red;
}

#canvas {
  width: 100px;
  height: 100px;
  background: green;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
  <div id="canvas"></div>
</div>
</div> </div>

それが役に立てば幸い :)

1
追加された

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>

<body>
    <div class="middle">
        <div  id="canvas" style="width:10px;height:10px;background:red;"></div>
</div>
</body>
<script>
$(document).ready(function(){
    alert("test");

    $("#canvas").click(function(){
        alert("canvas");
    });
    $(".middle").click(function(){
        alert("middle");
    });
});
</script>
</div> </div>

divを入力タイプまたはボタンに変更してみてください。divに色を指定してクリックしたときに機能します。イベントをクリックする場所がわからずに動作しませんでした。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript