Q&A
HTMLを質問文に追記いただけませんか？
###前提・実現したいこと
Ajaxで遷移レスなアプリケーションを作成しています
###発生している問題・エラーメッセージ
GUI画面から(#create_survey)メニューボタンを2回押してから
(.add-question)ボタンを押すと「$(document).on('click', '.add-question', function(event)」が2回実行されてしまう
解決策がわかるかたがいらっしゃたらお知恵をお貸しください。よろしくお願いいたします。
###ソースコード
javascript
1 2$('#create_survey').click(function() { 3 4 var loginid = $(':hidden[name="loginId"]').val(), 5 userid = $(':hidden[name="userid"]').val(), 6 taccountid = $(':hidden[name="taccountid"]').val(), 7 page = "create_survey", 8 urlget = "http://localhost/api/survey/create/" + loginid, 9 urlgetq = "http://localhost/api/survey/question/" + loginid, 10 urlpost = "http://localhost/api/survey/create/" + loginid, 11 urlpostq = "http://localhost/api/survey/question/" + loginid, 12 csrfToken = $("meta[name='_csrf']").prop("content"), 13 apiToken = $(':hidden[name="token"]').val(), 14 header = $("meta[name='_csrf_header']").prop("content"); 15 16 $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none'); 17 18 $('.content').hide().load('create_survey.html').fadeIn(function() { 19 // init data 20 var surveyId = 0, 21 lastQuestionId = 0, 22 no = 0, 23 val = 0; 24 // init datepicker 25 datepickerConfig(); 26 // get uncompleted survey data 27 getUncompletedSurvey(loginid, apiToken, surveyId); 28 // get uncompeted question data 29 getUncompetedQuestion(loginid, apiToken, lastQuestionId); 30 31 // when click add-question button 32 $(document).on('click', '.add-question', function(event) { 33 if ($('[name=title]').val() === '' || $('[name=target] option:selected').val() === '' || $('[name=period]').val() === '') { 34 swal("「タイトル」「対象」「回答期限」をすべて入力してください","", "error"); 35 } else { 36 $(".survey_border").css("border", "#F3CD33 1px solid"); 37 $(".answer-type").slideDown(); 38 if (surveyId === 0) { 39 var val1 = $('[name=title]').val(), 40 val2 = $('[name=target] option:selected').val(), 41 val3 = $('[name=period]').val(), 42 data = {"tAccountId":taccountid, "tUserId":userid, "id":null, "title":val1, "scope":val2, "period":val3, "completed":0, "enabled":0, "closed":0, "statusLabel":"<span class=\"label label-default\"><i class=\"fa fa-minus-square\"></i> 非公開</span>"}; 43 $.ajax({ 44 type : 'POST', 45 url : urlpost, 46 data : JSON.stringify(data), 47 contentType: 'application/json', 48 dataType : 'JSON', 49 scriptCharset : 'utf-8', 50 timeout: 10000, 51 beforeSend: function(xhr) { 52 xhr.setRequestHeader(header, csrfToken); 53 xhr.setRequestHeader("X-API-TOKEN", apiToken); 54 } 55 }) 56 .done(function(data){ 57 if (data.apiStatus === "error") { 58 swal("送信失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 59 } 60 surveyId = data.surveyId; 61 }) 62 .fail(function(response){ 63 swal("通信に失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 64 }); 65 } 66 } 67 }); 68 }); 69}); 70
###補足情報(言語/FW/ツール等のバージョンなど)
jQuery2.1.4
回答6件
0
js
1$(document).on('click', '.add-question', function(event) { ... })
が #create_survey をクリックするたびに実行されているためではないでしょうか？
そのコードを $('#create_survey').click(function() { ..}) の外に書くとどうでしょうか。
js
1$('#create_survey').click(function() { 2 // 略 3}); 4 5$(document).on('click', '.add-question', function(event) { 6 // 略 7});
.
.
下記は意味が判らなければ読み飛ばしてください。
わざわざ $('.add-question').click(function(event){ .. }) ではなくかつての live に相当する書き方にしているのはそういう意図ではないかと思います。
投稿2016/02/15 06:51
編集2016/02/15 06:54
総合スコア4514
ngyukiさん
「$('#create_survey').click(function() 」の外に書いてみたのですが、やはり事前に('#create_survey')をクリックした分だけ実行されてしまうようです。
0
こうするとどうですか？
javascript
1$('#create_survey').click(function() { 2 3 var loginid = $(':hidden[name="loginId"]').val(), 4 userid = $(':hidden[name="userid"]').val(), 5 taccountid = $(':hidden[name="taccountid"]').val(), 6 page = "create_survey", 7 urlget = "http://localhost/api/survey/create/" + loginid, 8 urlgetq = "http://localhost/api/survey/question/" + loginid, 9 urlpost = "http://localhost/api/survey/create/" + loginid, 10 urlpostq = "http://localhost/api/survey/question/" + loginid, 11 csrfToken = $("meta[name='_csrf']").prop("content"), 12 apiToken = $(':hidden[name="token"]').val(), 13 header = $("meta[name='_csrf_header']").prop("content"); 14 15 $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none'); 16 17 $('.content').hide().load('create_survey.html').fadeIn(function() { 18 // init data 19 var surveyId = 0, 20 lastQuestionId = 0, 21 no = 0, 22 val = 0; 23 // init datepicker 24 datepickerConfig(); 25 // get uncompleted survey data 26 getUncompletedSurvey(loginid, apiToken, surveyId); 27 // get uncompeted question data 28 getUncompetedQuestion(loginid, apiToken, lastQuestionId); 29 30 }); 31}); 32 33// when click add-question button 34$(document).on('click', '.add-question', function(event) { 35 if ($('[name=title]').val() === '' || $('[name=target] option:selected').val() === '' || $('[name=period]').val() === '') { 36 swal("「タイトル」「対象」「回答期限」をすべて入力してください","", "error"); 37 } else { 38 $(".survey_border").css("border", "#F3CD33 1px solid"); 39 $(".answer-type").slideDown(); 40 if (surveyId === 0) { 41 var val1 = $('[name=title]').val(), 42 val2 = $('[name=target] option:selected').val(), 43 val3 = $('[name=period]').val(), 44 data = {"tAccountId":taccountid, "tUserId":userid, "id":null, "title":val1, "scope":val2, "period":val3, "completed":0, "enabled":0, "closed":0, "statusLabel":"<span class=\"label label-default\"><i class=\"fa fa-minus-square\"></i> 非公開</span>"}; 45 $.ajax({ 46 type : 'POST', 47 url : urlpost, 48 data : JSON.stringify(data), 49 contentType: 'application/json', 50 dataType : 'JSON', 51 scriptCharset : 'utf-8', 52 timeout: 10000, 53 beforeSend: function(xhr) { 54 xhr.setRequestHeader(header, csrfToken); 55 xhr.setRequestHeader("X-API-TOKEN", apiToken); 56 } 57 }) 58 .done(function(data){ 59 if (data.apiStatus === "error") { 60 swal("送信失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 61 } 62 surveyId = data.surveyId; 63 }) 64 .fail(function(response){ 65 swal("通信に失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 66 }); 67 } 68 } 69});
投稿2016/02/15 06:47
総合スコア36080
Lhankor_Mhyさん
「$('#create_survey').click(function() 」の外に書いてみたのですが、やはり事前に('#create_survey')をクリックした分だけ実行されてしまうようです。うーん・・
0
$(document).on('click', '.add-question', fn)を設定される前に毎回$(document).off('click', '.add-question')したらどうなりますか？
javascript
1$('#create_survey').click(function() { 2 3 var loginid = $(':hidden[name="loginId"]').val(), 4 userid = $(':hidden[name="userid"]').val(), 5 taccountid = $(':hidden[name="taccountid"]').val(), 6 page = "create_survey", 7 urlget = "http://localhost/api/survey/create/" + loginid, 8 urlgetq = "http://localhost/api/survey/question/" + loginid, 9 urlpost = "http://localhost/api/survey/create/" + loginid, 10 urlpostq = "http://localhost/api/survey/question/" + loginid, 11 csrfToken = $("meta[name='_csrf']").prop("content"), 12 apiToken = $(':hidden[name="token"]').val(), 13 header = $("meta[name='_csrf_header']").prop("content"); 14 15 $('.content-header, div.row, .col-md-12, .box-info, .box').css( 'display', 'none'); 16 17 $('.content').hide().load('create_survey.html').fadeIn(function() { 18 // init data 19 var surveyId = 0, 20 lastQuestionId = 0, 21 no = 0, 22 val = 0; 23 // init datepicker 24 datepickerConfig(); 25 // get uncompleted survey data 26 getUncompletedSurvey(loginid, apiToken, surveyId); 27 // get uncompeted question data 28 getUncompetedQuestion(loginid, apiToken, lastQuestionId); 29 30 // when click add-question button 31 // 追加: １回.add-questionのクリックイベントをOFFにする 32 $(document).off('click', '.add-question'); 33 // 追加ここまで 34 $(document).on('click', '.add-question', function(event) { 35 if ($('[name=title]').val() === '' || $('[name=target] option:selected').val() === '' || $('[name=period]').val() === '') { 36 swal("「タイトル」「対象」「回答期限」をすべて入力してください","", "error"); 37 } else { 38 $(".survey_border").css("border", "#F3CD33 1px solid"); 39 $(".answer-type").slideDown(); 40 if (surveyId === 0) { 41 var val1 = $('[name=title]').val(), 42 val2 = $('[name=target] option:selected').val(), 43 val3 = $('[name=period]').val(), 44 data = {"tAccountId":taccountid, "tUserId":userid, "id":null, "title":val1, "scope":val2, "period":val3, "completed":0, "enabled":0, "closed":0, "statusLabel":"<span class=\"label label-default\"><i class=\"fa fa-minus-square\"></i> 非公開</span>"}; 45 $.ajax({ 46 type : 'POST', 47 url : urlpost, 48 data : JSON.stringify(data), 49 contentType: 'application/json', 50 dataType : 'JSON', 51 scriptCharset : 'utf-8', 52 timeout: 10000, 53 beforeSend: function(xhr) { 54 xhr.setRequestHeader(header, csrfToken); 55 xhr.setRequestHeader("X-API-TOKEN", apiToken); 56 } 57 }) 58 .done(function(data){ 59 if (data.apiStatus === "error") { 60 swal("送信失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 61 } 62 surveyId = data.surveyId; 63 }) 64 .fail(function(response){ 65 swal("通信に失敗しました", "お手数ですが不具合報告フォームからご連絡いただくかサポート窓口までお問い合わせください", "error"); 66 }); 67 } 68 } 69 }); 70 }); 71});
投稿2016/09/12 23:21
総合スコア29
0
$('#create_survey')の外側に$(document).on('click', '.add-question', function(event) {を書いてもダメとのことなので、HTML側も見ないとわからないなと思いました。
HTMLも掲載してくれるとすぐ解決しそうですが…想像で回答しますね。
HTML側で .add-question が #create_survey に内包されているということはありませんか？#cerate_surveyをクリックすると同時に、中の.add-questionもクリックしてしまっている可能性があります。
$(document).on('click', '.add-question',
この書き方をしているということは、#cerate_surveyをクリックしたとしても、それは同時に$(document)をクリックしたことになり、そちらのイベントで「そこが.add-questionかどうか」を判定してしまいます。
なんにせよ、HTMLを掲載していただくのが解決への近道だと思いますよ。
よろしくお願いします。
投稿2016/08/01 05:38
総合スコア1298
0
$(document).on('click', '.add-question', function(event) {の部分を、
$('.add-question').unbind('click'); $('.add-question').click(function(event){と変更してみてはどうでしょう。
投稿2016/06/16 14:49
総合スコア46
0
こちらは確認されていますでしょうか？
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13109305938
投稿2016/02/15 06:35
総合スコア215
hato-patoさんご回答ありがとうございます。
申し訳ありません、タイトルが誤っていたので修正しました。submitではなく「$(document).on('click'」でした。確かにsubmitの場合は本来の動きを消す必要がありますね。
あなたの回答
tips
プレビュー
