フォームにAJAXを使用してデータを保存してファイルにロードする必要があるページがあります。タグ Jquery＆Ajax - ajaxリクエスト後にフォームにサブミットできません

第二の機能でクラス.configFileは、タグのリストを参照するための

$(document).ready(function(){ 


$("#saveConfigForm").submit(function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 

}); 

$(".configFile").click(function() { 


    if (this.text == '' && this.text == 'undefined') 
    { 
     return; 

    } 

    $.get("showForm.php", { loadConfig: this.text}) 
     .done(function(data) { 
     $('#configFormContainer').html(data); 
    }); 


});

HTML：

はJavaScript

は、これは私が使用していたJavaスクリプトです。これらをクリックすると、スクリプトはファイルからコンテンツを正常に読み込んで表示します。

<div class="list-group"> 
    <a href="#" class="configFile>config.json</a> 
    <a href="#" class="configFile>config_1504987517.json</a> 

</div>

この部分は正常に動作している：これは言及-タグ用のHTMLでのJavaScript機能がトリガされます。 showForm.phpでは、設定ファイルが読み込まれます。ファイルからのコンテンツを含む完全なフォームを再構築しています。実際に動作していないいただきましフォーム

ため

HTMLを提出し、機能上のトリガーです。私が最初にページをロードすると

、私が提出-ボタンをクリックし、アラートを取得する：これは問題

だから、今起こっていただきましいただきましフォームのHTML

<form id="saveConfigForm" method="POST"> 

<a bunch of form elements /> 

<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button> 
</form>

です。このトリガ.submit（）が機能しています。

コンフィギュレーションファイルをロードするためにaタグの1つをクリックすると、ファイルはページをリフレッシュせずにロードされています。このトリガーの.click（）も機能しています。

の後に：送信ボタンをクリックすると、ページがリロードされています。トリガー.submit（）が機能していません。

ページのこの「不要な」リロードの後に、.submit（） - トリガーが再び機能しています。

私はそれが間違っているか何かを知りません。これはあなたの全体のコードセットではありませんが、誰かが

歓声

出典

2017-09-09 n.r.

PS （） '（https://api.jquery.com/jquery.get/）や' .load（） 'のようなAJAXの処理には？ –

@ RokoC.Buljan良いアイデアは、これを変更します。 jQuery関連ではない別のチュートリアルからこれを手に入れました。ありがとう。 –

'.get（）'を実装しているときに 'Event.preventDefault'を見て、新しく生成された要素をクリックするようにするにはjQueryの' .on（） 'を見て、**動的イベントの委譲についてのセクションを必ず読んでください**。 –

を助けることを願って、私はあなたが投稿してページを作ったものでした。 .configFileのいずれかのリンクをクリックしてから、送信ボタンをクリックすると警告が表示されます。

しかし、私は.configFile要素の属性をで閉じました。それが違いなのかどうかはわかりません。しかし、そうでない場合は、Ajaxリクエストの後に発生しているものですが、もちろんこのコードではシミュレートできません。

<html> 
<body> 
<div class="list-group"> 
    <a href="#" class="configFile">config.json</a> <!-- //added " to end of class attribute --> 
    <a href="#" class="configFile">config_1504987517.json</a> <!--//added " to end of class attribute --> 

</div> 

<form id="saveConfigForm" method="POST"> 

<a bunch of form elements /> 

<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button> 
</form> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> 

<script> 
$(document).ready(function(){ 
$("#saveConfigForm").submit(function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 

}); 

$(".configFile").click(function() { 


    if (this.text == '' && this.text == 'undefined') 
    { 
     return; 

    } 


    if (window.XMLHttpRequest) 
    { 
     // AJAX for IE7+, Chrome, Firefox, Safari, Opera 
     xmlhttp = new XMLHttpRequest(); 

    } else { 

     // AJAX for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 

    } 

    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 

      $('#configFormContainer').html(xmlhttp.responseText); 

     } 

    } 

    xmlhttp.open("GET","showForm.php?loadConfig=" + this.text, true); 
    xmlhttp.send(); 
    }); 
}); 
</script> 
</body> 
</html>

私に好奇心旺盛になり、他の事：あなたのその後作品を提出した場合、私はバインディングのいずれかをお勧めしたい

$("#saveConfigForm").submit(function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 
});

：ブラウザのデベロッパーコンソールを開き、再びバインダーを提出して貼り付けます新しいhtmlがレンダリングされた後、再度clickイベントが発生します。または、同様に$（文書）にイベントをバインド：最後の注意として

$(document).on('submit', '#saveConfigForm', (e) => { 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 
});

、私はあなたが持っている特定の問題を助けるためにあなたのコード必要以上に強化しようとしていませんよ。別のユーザがコメントしたように、jQueryを使用しているので、jQuery関数を使用する方がクリーンです。しかし、私はあなたの質問の一部としてそれを取っていません。

出典

2017-09-09 21:38:35

'//AJAX for IE6、IE5'これはまさにjQueryが設計したものです... IE5と6は幸いにも枯れたブラウザです... –

努力してくれてありがとうございました。自分で解決策を見つけましたが、この種のことは私を助けました。要素を再作成したため、トリガが失われました。ありがとう。 –

問題を引き起こしていることがわかりました。ajax-callはhtmlフォームを返し、フォームコンテナに配置します。

この後、トリガーがフォームに接続されているため、そのフォームへのトリガーは消え、ajax-dataで上書きしています。

Quick'n'dirty

それは私がそのようにトリガーをリセットしたときに、動作します。しかし、これはもっと素早く見えます。

$(document).ready(function(){ 


$("#saveConfigForm").submit(function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 

}); 

$(".configFile").click(function() { 


    if (this.text == '' && this.text == 'undefined') 
    { 
     return; 

    } 

    $.get("showForm.php", { loadConfig: this.text}) 
     .done(function(data) { 
     $('#configFormContainer').html(data); 

     // re-init the trigger on "submit" here 
     // ------------------------------------ 
     $("#saveConfigForm").submit(function (e) 
     { 
      e.preventDefault(); 
      var formData = $(this).serialize(); 
      alert(formData); 

     }); 

    }); 

});

}）;

クリーンフィックス

showForm.phpを調整する必要がありました。それがajaxメソッドから呼び出されている場合は、フォーム自体ではなく、フォーム要素のみを返します。最初から呼び出されている場合は、完全なフォームを返します。

さらに、Javaスクリプトは、コンテナではなくフォーム要素の内容を置き換えます。この方法でトリガーが失われることはありません。ただ、完全性のために、これは現在showForm.phpの主要部分

$(document).ready(function(){ 


$("#saveConfigForm").submit(function (e) 
{ 
    e.preventDefault(); 
    var formData = $(this).serialize(); 
    alert(formData); 

}); 

$(".configFile").click(function() { 


    if (this.text == '' && this.text == 'undefined') 
    { 
     return; 

    } 

    $.get("showForm.php", { loadConfig: this.text}) 
     .done(function(data) { 
     $('#saveConfigForm').html(data); 


    }); 

}); 
});

されています：私は[ `に.getの彼らのシンプルな実装を使用していないなぜあなたは、jQueryのを使用して参照

<?php 
if (!isset($_GET['loadConfig'])) 
{ 
    // do not return the complete form to prevent losing the trigger on it 
    echo '<form id="saveConfigForm" method="POST">'; 

} 

echo '<a bunch of form elements />'; 

if (!isset($_GET['loadConfig'])) 
{ 
    echo '</form>'; 

}

出典

2017-09-09 22:03:08

Jquery＆Ajax - ajaxリクエスト後にフォームにサブミットできません

HTML：

はJavaScript

HTMLを提出し、機能上のトリガーです。私が最初にページをロードすると 、私が提出-ボタンをクリックし、アラートを取得する：これは問題

答えて

Quick'n'dirty

クリーンフィックス

関連する問題

HTMLを提出し、機能上のトリガーです。私が最初にページをロードすると

、私が提出-ボタンをクリックし、アラートを取得する：これは問題