質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.09%

mouseoverのイベントが起きない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 392

sakura-shi

score 23

やりたいこと

テーブルの各セルに対しmouseoverのイベントで、ポップアップを表示させ、セルから渡されたパラメータを条件にしてポップアップの中を書き換えたい

前提:

ここで掲載したソースには、万一掲載ミスがあったとしても、実際は文法ミスはないという前提です。

疑問点1

セルに対し、イベントがおきない

疑問点2

(イベントが起きて、ポップアップが表示された時点で追加するかもしれません。)

やってみたこと

■呼び出し側

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="description" content="popModal - jquery plugin for showing tooltips, titles, modal dialogs and etc">
<meta name="keywords" content="popup, dialog, notification-popups, modal-dialogs, html, javascript, notifications, modal, notify, confirm">
<title>popModal</title>
<style>
* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px}
body {background:#f1f1f1}

::-webkit-scrollbar {width:10px}
::-webkit-scrollbar-track {background-color:#f1f1f1}
::-webkit-scrollbar-thumb {background-color:#9699a2}
::-webkit-scrollbar-thumb:hover {background-color:#555}

#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px}
#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px}

.pageCaption {margin-bottom:40px;font-size:34px;line-height:40px}
.blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px}

#header {}
.prjData {float:right;font-weight:500;line-height:24px;display:flex}
.prjData > a {font-size:12px;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;margin-left:5px;transition:all 0.2s ease-in-out}
.prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)}
.prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px}
.prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999}
.prjData > .prjDownloadLink {color:#fff;background:#0084ff}
.prjData > .prjGitLink {color:#555;background:#ccc}
.prjName {font-size:24px;font-weight:500;line-height:24px}
.prjDesc {color:#777;margin-top:5px;font-size:90%}

#footer {}
.prjCopyright {color:#777}
.prjLicense {float:right;font-size:12px}
.prjAuthor {font-size:12px}


.exampleContainer {margin:-1px 0 50px}
.exampleContainer:last-child {margin-bottom:0}
.exampleContainer .exampleLive {padding:20px 0;font-size:14px}
.exampleContainer .exampleLive:after {content:'';clear:both;display:table}
.exampleContainer .exampleLive .exampleLiveTitle {padding-bottom:10px}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto;border-radius:4px}
.exampleContainer .exampleCode pre {line-height:0}
.exampleContainer .exampleCode code {white-space:pre-line}
.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
.exampleContainer .exampleCode code .tab {padding-left:15px}
.exampleContainer .exampleCode code .tab2 {padding-left:30px}
.exampleContainer .exampleCode code .tab3 {padding-left:45px}
.exampleContainer .exampleCode code .tab4 {padding-left:60px}
.exampleContainer .exampleCode code .tag {color:#97e0e9}
.exampleContainer .exampleCode code .text {color:#fff}
.exampleContainer .exampleCode code .key {color:#bf5c5b}
.exampleContainer .exampleCode code .val {color:#fadf8c}
.exampleContainer .exampleCode code .var {color:#aae997}
.exampleContainer .exampleCode code .var2 {color:#b297e9}

@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>

<div id="page">
 <div id="header">
  <div class="prjName">popModal</div>
  <div class="prjDesc">jquery plugin for showing tooltips, titles, modal dialogs and etc</div>
 </div>
 <div id="page_content">
  <div class="page_container">
   <div class="page" data-page="popModal">
    <div class="exampleContainer">
    <div class="exampleLive">
    <div class="exampleLiveTitle">loading ajax</div>
    <br /><br />
    <p>日別売上表</p>
    <table border="1">
    <tr>
     <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th>
    </tr>
    <tr>
     <td>2018-09-03</td>
         <td data-cc="100" data-date="2018-09-03">123,000円</td>
         <td data-cc="200" data-date="2018-09-03">456,000円</td>
         <td data-cc="300" data-date="2018-09-03">789,000円</td>
    </tr>
       <tr>
    <td>2018-09-10</td>
        <td data-cc="100" data-date="2018-09-10">789,999円</td>
        <td data-cc="200" data-date="2018-09-10">888,999円</td>
        <td data-cc="300" data-date="2018-09-10">999,999円</td>
       </tr>
       </table>
     </div>
     </div>
     </div>
     </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<script src="popModal.js"></script>
<script>
$(function(){
  $('[data-cc]').mouseover(function(){
    console.log("data-cc320");
    $(this).popModal({
       html : {url: '/sample/cc-list/detail-day?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')), errorText: 'An error has occurred'}
  });
//});

$(window).scroll(function(){
    getActivePage();
});
getActivePage();

function getActivePage() {
    var nav = $('.page');
    for (var i = 0; i < nav.length; i++) {
        if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) {
            $('.tab').removeClass('active');
            $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active');
            break;
        }
    }
}

});
</script>
</body>
</html>

■呼び出されるHTML(PHP)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example</title>
<meta name="description" content="あいうえお" >
<meta name="robots" content="INDEX,FOLLOW" >
<meta name="googlebot" content="INDEX,FOLLOW" >
<meta name="author" content="かきくけこ" >
<meta name="copyright" content="Copyright(C) 2001-2015 XX." >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noydir,noodp" />
</head>
<body >
    <div id="header">
        <h1>A社売上明細</h1>
                <form>
        <table width="200" height="1000" border="1">
        <tr>
            <td height="500" align="top">
            <input type="radio" value="1" onchange="submit()">選択肢1
            <input type="radio" value="2" onchange="submit()">選択肢2
            <br><br>
            あいうえお
            </td>
        </tr>
        <tr>
            <td height="500" align="top">
            かきくけこ
            </td>
        </tr>
        </table>
                </form>
    </div>
<!---------------------------------------------------->
This content loaded via ajax.
</body>
</html>

https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/10/20 20:59

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

+2

疑問点1
の解答として文法エラーだからです。

$(function(){
  $('[data-cc]').mouseover(function(){
    console.log("data-cc320");
    $(this).popModal({
       html : {url: '/sample/cc-list/detail-day?cc=' + encodeURIComponent($(this).attr('data-cc')) + '&date=' + encodeURIComponent($(this).parent().attr('data-date')), errorText: 'An error has occurred'}
  });
//});


最後のコメントを外したらログは出力されました
(popModal.jsまでは組み込んで検証してないので$(this).popModalでエラーは起こりましたがイベントは来てます)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/15 17:10

    質問文自体に誤りがありました。
    文法エラーがない状態で、イベントが発生しないことが問題です。

    どこを確認したらいいでしょうか?

    キャンセル

  • 2018/10/15 17:14

    ChromeでF12押して開発者ツールを表示してConsoleを確認したらdata-cc320と出るのを確認してます

    キャンセル

check解決した方法

0

原因がわからないのですが、
$('[data-cc]').mouseover(function(){
の部分を
$('[data-date]').mouseover(function(){
に変更するとイベントが起きるようになりました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる