Q&A#やりたいこと
テーブルの各セルに対しmouseoverのイベントで、ポップアップを表示させ、セルから渡されたパラメータを条件にしてポップアップの中を書き換えたい
#前提：
ここで掲載したソースには、万一掲載ミスがあったとしても、実際は文法ミスはないという前提です。
#疑問点１
セルに対し、イベントがおきない
#疑問点２
（イベントが起きて、ポップアップが表示された時点で追加するかもしれません。）
#やってみたこと
■呼び出し側
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6<meta name="apple-mobile-web-app-capable" content="yes"> 7<meta name="description" content="popModal - jquery plugin for showing tooltips, titles, modal dialogs and etc"> 8<meta name="keywords" content="popup, dialog, notification-popups, modal-dialogs, html, javascript, notifications, modal, notify, confirm"> 9<title>popModal</title> 10<style> 11* {margin:0;font-family:Roboto,sans-serif;outline:0;box-sizing:border-box;font-size:14px} 12body {background:#f1f1f1} 13 14::-webkit-scrollbar {width:10px} 15::-webkit-scrollbar-track {background-color:#f1f1f1} 16::-webkit-scrollbar-thumb {background-color:#9699a2} 17::-webkit-scrollbar-thumb:hover {background-color:#555} 18 19#page {margin:30px auto 60px;width:40%;min-width:800px;min-height:500px} 20#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin:20px 0 20px;border-radius:3px;position:relative;padding:30px 30px 60px} 21 22.pageCaption {margin-bottom:40px;font-size:34px;line-height:40px} 23.blockCaption {margin-bottom:20px;font-size:24px;border-bottom:1px solid #ddd;line-height:40px} 24 25#header {} 26.prjData {float:right;font-weight:500;line-height:24px;display:flex} 27.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} 28.prjData > a:hover {box-shadow:inset 0 0 0 30px rgba(0,0,0,0.2)} 29.prjData > .prjVer {background:transparent;color:#555;display:inline-block;padding:0 10px;margin-left:5px;font-size:12px} 30.prjData > .prjVer > span {margin-left:10px;font-size:12px;color:#999} 31.prjData > .prjDownloadLink {color:#fff;background:#0084ff} 32.prjData > .prjGitLink {color:#555;background:#ccc} 33.prjName {font-size:24px;font-weight:500;line-height:24px} 34.prjDesc {color:#777;margin-top:5px;font-size:90%} 35 36#footer {} 37.prjCopyright {color:#777} 38.prjLicense {float:right;font-size:12px} 39.prjAuthor {font-size:12px} 40 41 42.exampleContainer {margin:-1px 0 50px} 43.exampleContainer:last-child {margin-bottom:0} 44.exampleContainer .exampleLive {padding:20px 0;font-size:14px} 45.exampleContainer .exampleLive:after {content:'';clear:both;display:table} 46.exampleContainer .exampleLive .exampleLiveTitle {padding-bottom:10px} 47.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto;border-radius:4px} 48.exampleContainer .exampleCode pre {line-height:0} 49.exampleContainer .exampleCode code {white-space:pre-line} 50.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px} 51.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block} 52.exampleContainer .exampleCode code .tab {padding-left:15px} 53.exampleContainer .exampleCode code .tab2 {padding-left:30px} 54.exampleContainer .exampleCode code .tab3 {padding-left:45px} 55.exampleContainer .exampleCode code .tab4 {padding-left:60px} 56.exampleContainer .exampleCode code .tag {color:#97e0e9} 57.exampleContainer .exampleCode code .text {color:#fff} 58.exampleContainer .exampleCode code .key {color:#bf5c5b} 59.exampleContainer .exampleCode code .val {color:#fadf8c} 60.exampleContainer .exampleCode code .var {color:#aae997} 61.exampleContainer .exampleCode code .var2 {color:#b297e9} 62 63@media (max-width: 840px){ 64#page {width:auto;min-width:0;margin:20px 20px 100px} 65} 66</style> 67<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500"> 68<link type="text/css" rel="stylesheet" href="popModal.css"> 69</head> 70<body> 71 72<div id="page"> 73 <div id="header"> 74 <div class="prjName">popModal</div> 75 <div class="prjDesc">jquery plugin for showing tooltips, titles, modal dialogs and etc</div> 76 </div> 77 <div id="page_content"> 78 <div class="page_container"> 79 <div class="page" data-page="popModal"> 80 <div class="exampleContainer"> 81 <div class="exampleLive"> 82 <div class="exampleLiveTitle">loading ajax</div> 83 <br /><br /> 84 <p>日別売上表</p> 85 <table border="1"> 86 <tr> 87 <th>日付/社名</th><th>A社</th><th>B社</th><th>C社</th> 88 </tr> 89 <tr> 90 <td>2018-09-03</td> 91 <td data-cc="100" data-date="2018-09-03">123,000円</td> 92 <td data-cc="200" data-date="2018-09-03">456,000円</td> 93 <td data-cc="300" data-date="2018-09-03">789,000円</td> 94 </tr> 95 <tr> 96 <td>2018-09-10</td> 97 <td data-cc="100" data-date="2018-09-10">789,999円</td> 98 <td data-cc="200" data-date="2018-09-10">888,999円</td> 99 <td data-cc="300" data-date="2018-09-10">999,999円</td> 100 </tr> 101 </table> 102 </div> 103 </div> 104 </div> 105 </div> 106 </div> 107</div> 108 109<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> 110<script src="popModal.js"></script> 111<script> 112$(function(){ 113 $('[data-cc]').mouseover(function(){ 114 console.log("data-cc320"); 115 $(this).popModal({ 116 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'} 117 }); 118//}); 119 120$(window).scroll(function(){ 121 getActivePage(); 122}); 123getActivePage(); 124 125function getActivePage() { 126 var nav = $('.page'); 127 for (var i = 0; i < nav.length; i++) { 128 if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) { 129 $('.tab').removeClass('active'); 130 $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active'); 131 break; 132 } 133 } 134} 135 136}); 137</script> 138</body> 139</html>
■呼び出されるHTML（PHP）
HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<html> 3<head> 4<title>Example</title> 5<meta name="description" content="あいうえお" > 6<meta name="robots" content="INDEX,FOLLOW" > 7<meta name="googlebot" content="INDEX,FOLLOW" > 8<meta name="author" content="かきくけこ" > 9<meta name="copyright" content="Copyright(C) 2001-2015 XX." > 10<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 11<meta name="robots" content="noydir,noodp" /> 12</head> 13<body > 14 <div id="header"> 15 <h1>A社売上明細</h1> 16 <form> 17 <table width="200" height="1000" border="1"> 18 <tr> 19 <td height="500" align="top"> 20 <input type="radio" value="1" onchange="submit()">選択肢１ 21 <input type="radio" value="2" onchange="submit()">選択肢２ 22 <br><br> 23 あいうえお 24 </td> 25 </tr> 26 <tr> 27 <td height="500" align="top"> 28 かきくけこ 29 </td> 30 </tr> 31 </table> 32 </form> 33 </div> 34<!----------------------------------------------------> 35This content loaded via ajax. 36</body> 37</html>
https://github.com/vadimsva/popModal/releases
からダウンロードしたファイルを参考にしています
回答2件
0
疑問点１
の解答として文法エラーだからです。
JavaScript
1$(function(){ 2 $('[data-cc]').mouseover(function(){ 3 console.log("data-cc320"); 4 $(this).popModal({ 5 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'} 6 }); 7//});
最後のコメントを外したらログは出力されました
(popModal.jsまでは組み込んで検証してないので$(this).popModalでエラーは起こりましたがイベントは来てます)
投稿2018/10/15 02:30
総合スコア5545
0
自己解決
原因がわからないのですが、
$('[data-cc]').mouseover(function(){
の部分を
$('[data-date]').mouseover(function(){
に変更するとイベントが起きるようになりました
投稿2018/10/18 02:09
総合スコア93
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/15 08:10
2018/10/15 08:14