クリックイベントにajaxを使った処理の関数を登録すると発火しない

JavaScript
1
2$(function() {
3  $('#outputBtn').click(
4    function(){
5      setDownloadBox();
6    });
7function setDownloadBox(){
8  $.ajax({
9      type:'POST',
10      url :'getCSV.php',
11      data:{key:'value'}
12  }).fail(function(){
13      alert('error');
14  }).done(function(buf){
15     result = JSON.parse(buf);
16     for(var value of result){
17       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
18     }
19  });
20}
21})
22

ajaxを使った処理を含む関数をボタンのクリックイベントで発火させようとしているコードになります。

setDownloadBox()の動作,クリックイベントの挙動はそれぞれ単体で正常に動いていることは確認しているのですがボタンをクリックしても何も動作しません。
コンソールでのエラー、等も出ていない模様です。
記述箇所はbodyタグの直前になります。
どなたかご教授お願いいたします

JavaScript
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>beaconLog</title>
6</head>
7
8<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
9<script type="text/javascript">
10$(function() {
11  $('#outputBtn').click(
12    function(){
13      setDownloadBox();
14    });
15function setDownloadBox(){
16  $.ajax({
17      type:'POST',
18      url :'getCSV.php',
19      data:{key:'value'}
20  }).fail(function(){
21      alert('error');
22  }).done(function(buf){
23     result = JSON.parse(buf);
24     for(var value of result){
25       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
26     }
27  });
28}
29})
30</script>
31
32<body>
33<?php
34  $env = [.....];
35  $envSelectBox = "<select name=\"selectedEnv\">\n";
36  for ($i = 0; $i < count($env); $i++) {
37    $envSelectBox .= "\t<option value=\"{$env[$i]}\">{$env[$i]}</option>\n";
38  }
39  $envSelectBox .= "</select>\n";
40
41  date_default_timezone_set("Asia/Tokyo");
42  $defaultFirstDate = date("Y年m月d日H時", strtotime("-1 hour"))."0分0秒";
43  $defaultLastDate  = date("Y年m月d日H時")."59分59秒";
44
45  $refineItemList = [.....];
46  $refineItemBox = "";
47  foreach ($refineItemList as $key => $value) {
48    $refineItemBox .= "{$value}<br>\n<input type=\"text\" name=\"{$key}\"><br>\n";
49
50    // 末尾のアンダーバーで初期値チェックを判断
51    $outPutItemList = [.....];
52    $outputItemBox = "";
53    $i = 1;
54    foreach($outPutItemList as $key => $value) {
55      $outputItemBox .= "<input type=\"checkbox\" name=\"outputItem[]\" value=\"{$key}\"";
56      $pattern = "/_/";
57
58     if(preg_match($pattern, $value)){
59        $result = preg_replace($pattern, "", $value);
60        $outputItemBox .= "checked >{$result}\n";
61      }
62      else{
63        $outputItemBox .= ">{$value}\n";
64      }
65
66      // 4項目ごとに改行
67      if($i % 4 == 0){$outputItemBox .= "<br>\n";}
68      $i ++;
69    }
70?>
71
72<h2>入力項目</h2>
73
74<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="post">
75
76環境<br>
77<?php echo "{$envSelectBox}<br>";?>
78
79From 年月日時分秒<br>
80<input type="text" size="30" value=<?php echo $defaultFirstDate;?> name="FirstDate"><br>
81
82To 年月日時分秒<br>
83<input type="text" size="30" value=<?php echo $defaultLastDate;?> name="LastDate"><br>
84
85<?php echo "<h2>絞り込み項目</h2>";
86      echo $refineItemBox;
87      echo "<input type=\"submit\" id=\"outputBtn\" value=\"出力\" />";
88      echo "<h2>出力項目</h2>";
89      echo $outputItemBox;
90
91      $reqList = [.....];
92      $reqOutputItem  = $_POST["outputItem"];
93      $reqList = array_merge($reqList, $reqOutputItem);
94      $command = ......;
95      foreach($reqList as $index => $value) {
96        $command.= " \"{$value}\"";
97      }
98      exec($command);
99?>
100<div id="downloadBox">
101</div>
102
103</form>
104
105</body>
106
107</html>
108

変数の内容は事情により省略していますがこれがソースコードの全文になります。
下記コードのコメントアウト部分でそれぞれ処理の流れを追いましたが特に止まっている個所はなく処理が進んでいるようでした....
またbuf,resultをコンソールログで確認したところ正常に値が入ってはいるのですがなぜか一瞬で表示が消えてしましました。

JavaScript
1function setDownloadBox(){
2  //alert('check');
3  $.ajax({
4      type:'POST',
5      url :'getCSV.php',
6      data:{key:'value'}
7  }).fail(function(){
8      alert('error');
9  }).done(function(buf){
10     //alert('check');
11     result = JSON.parse(buf);
12     for(var value of result){
13       $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`);
14     }
15    //alert('check');
16  });
17}

m.ts10806

2018/04/10 01:22

念のためHTMLもご提示ください。あと、function setDownloadBox(){　を　$(function() {　の外に置いて試してみて、結果を教えてください。

m.ts10806

2018/04/10 01:26 編集

一応、私の方ですが、同ソースで問題なく#outputBtnクリックでsetDownloadBox()が実行できることを確認できています。（getCSV.php置いていないのでfailに入りますが）

Lulucom

2018/04/10 01:35 編集

「記述箇所はbodyタグの直前」とは開始タグ（<body>）の直前でしょうか。それとも終了タグ（</body>）の直前でしょうか。やはり、全体のコードが見たいですね。

tomagurosu

2018/04/10 02:31

コード全文追加させていただきました。

tomagurosu

2018/04/10 02:33 編集

”function setDownloadBox(){　を　$(function() {　の外に置いて試してみて、結果を教えてください。”　こちら試させていただいたところ反応がなく、そもそもアラートすら反応しませんでした。

defghi1977

2018/04/10 02:52

こういうのは生PHPじゃなくてレンダリング後のHTMLを提示して欲しい・・・

m.ts10806

2018/04/10 03:27

催促するのもなんですが「ベストアンサーに選ばさせていただきました。」とのことですが、まだ「受付中」のままになっていますよ。

tomagurosu

2018/04/10 03:43

失礼しました。押すのを忘れていました

行動規範の内容に同意します

回答3件

ベストアンサー

buttonがsubmitのままでいきたいようでしたらsubmitを止める必要があります。

javascript
1$('#outputBtn').click(
2    function(e){
3      e.preventDefault();
4      setDownloadBox();
5    });
6

投稿2018/04/10 02:39

編集2018/04/10 02:41

m.ts10806

総合スコア80850

tomagurosu

2018/04/10 02:52

コード提示までしていただいたのでベストアンサーに選ばさせていただきました。ありがとうございます！

行動規範の内容に同意します

outputBtn のボタンは、<input type="submit"> ではなく、<button type="button"> とすべきではないでしょうか。

submit ボタンだと、form がサブミットされ画面遷移してしまい、一瞬で表示が消えてしまうのではないかと思います。

投稿2018/04/10 02:37

編集2018/04/10 02:41

Lulucom

総合スコア1899

tomagurosu

2018/04/10 02:51

あー、なるほど！！確かに遷移してるからそうなりますね.... ありがとうございます！！！

行動規範の内容に同意します

発火を確認するなら呼び出し先の関数を簡素化してデバッグしてください

javacript
1$(function() {
2  $('#outputBtn').click(
3    function(){
4      setDownloadBox();
5    });
6  function setDownloadBox(){
7    alert("called");
8  }
9});