LoginSignup
@akane-chan (akane akane)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jQueryで自分以降、最初に出てくる特定の要素を表示する

Q&A

Closed

JavaScriptjQuery

jQueryで自分以降、最初に出てくる特定の要素を表示する方法で苦戦しています。

以下コードのは別の要素をクリックすると、そのたび生成されるものになります。
・プレビュー用画像をクリックしたらモーダル用のstart～endをモーダル表示させたいです。

コード

              //プレビュー：中身
              var time = 'time' + Date.now();
              var img_vew = '';
              img_vew  ='<div class="img_vew" id="'+ time +'">';
              img_vew +='   <img src="'+ response + '" class="img_preview"><br>';//プレビュー用画像
              img_vew +='   <div style="display:none; background:black;" class="modal">';//モーダル用start
              img_vew +='     <div class="modal_main">';
              img_vew +='       <img src="'+ response + '"><br>';
              img_vew +='       <button class="modal_close">閉じる</button>';
              img_vew +='     </div>';
              img_vew +='   </div>';//モーダル用end
              img_vew +='   <button class="crop_image_delete" style="margin-top:30px;">削　除</button>';
              img_vew +='</div>';
              //プレビュー
              $('#img_vew').append(img_vew);
            })
          });

         //画像をクリックしたらモーダルを表示する
         $(document).on("click", ".img_preview", function(){
           alert("popo");
         });

alert("popo");　の部分にどう書けば意図するように動くのかでハマっています…。

自分で試したこと

幾つか試してみたのですが、ドレも意図する動きになりませんでした。
以下のような動きがやりたいです。
$("this + .modal").show();

よろしくお願いします。

1 likes

7Answer

prismrism
@prismrism

＜button class="modal_close"＞閉じる＜/button＞の挙動がおかしい事に気付きました。

と

なぜかリロードした動きになります。

について、

<button> タグの type 属性値が指定されていない場合は type="submit" と同じ挙動になるため、クリック時にイベントハンドラとは別に現在のページを遷移先とする submit 送信が発生しているのだと思います。

submit を意図しない場合は type="button" を指定して下さい。

2Like

Comments

  1. @akane-chan

    Questioner

    ！！！！！そんな仕様が！
    仕様が変わったのでしょうか！？！？
    前はただただボタンでしかなかったような記憶だったのですが（覚え違いかも）。
    だとしたら原因が分かりました！！
    ありがとうございます。明日試してみます。試した結果もご報告いたしますネ。

    久々のフロントでまごついてましたが、とても助かりました！
    一人でやってると引っかかるとなかなか抜けられないのですがとても心強いです。
monaka_ben_mezd
@monaka_ben_mezd

以下はどうでしょうか？

//画像をクリックしたらモーダルを表示する
         $(document).on("click", ".img_preview", function(){
           $(this).next().show();
         });
1Like
monaka_ben_mezd
@monaka_ben_mezd

リロードされてるのは何らかの原因(location.href書き換え、意図せぬsubmit等)があると思いますが、提示されているソースコードの中にはリロードを起こすような箇所がみられないので、提示されていない部分にリロードの原因があると思います。

1Like
akane-chan
@akane-chan

@monaka_ben_mezdさん、@prismrismさん、ありがとうございます！
全て解決いたしました。
一人でやってたらまだ解決してない状態だったと思います！大変助かりました。
また何かありましたらヘルプいただきたく思います！

解決いたしましたのでクローズさせていただきます。
ありがとうございました！

1Like
akane-chan
@akane-chan

原因が分かりました！
記載いただいた内容と同じものを質問する前にも試していたのですが動作しなかったので今回質問させていただいたのですが、プレビュー用画像の後ろにbrタグがあって、それがnext()のターゲットになっていたようでした。
モーダルなので特に改行は必要でないためbrタグを削除してみたところ、教えて頂きました記述で動作するのを確認できました！
ありがとうございました。

この件は解決できたのですが今度は、
＜button class="modal_close"＞閉じる＜/button＞の挙動がおかしい事に気付きました。
このボタンをクリックすると

//モーダルを消す
$(document).on("click", ".modal_close", function(){
  console.log("bibi");
  $('.modal').hide();
});

を実行するのですが、なぜかリロードした動きになります。コンソールに一瞬bibiが表示されるのでモーダルを消す、の動きはしているようなのですが次の瞬間にはコンソール画面がクリアしてしまい、別途用意しているinput type="text"に入力した文字もクリアされてしまいます。
.modalが複数生成されていてもhideするだけなので問題ないと思っていたのですがこれだとダメなのでしょうか？

0Like
akane-chan
@akane-chan

確認いただきありがとうございます。
サードパーティ製のプラグインを入れているので、.modal_closeか.modalかプラグインのと被っているのかも！？ですね。
原因が分かりましたらまた改めてお返事いたします！

0Like

Your answer might help someone💌

LoginSign Up