XMLHttpRequest/Ajaxリンクの実行場所

Question

私はAjax/XMLHttpRequestを新しく理解しています。

私は基本的に箱にツールを追加する目録プログラムに取り組んでいます。メインページ（たとえばMainPage.php）には、ユーザーがツールに名前を入力してボックスに追加するためのテキストボックスがフォーム内にあります。私はMySQLLIKEの構文でMySQLデータベースのツールを検索するのにXMLHttpRequestと遊んでいます。ハンドラページ（HandlerPage.php）には、SQLを使用してツールを検索するコードがあります。検索結果はメインページのHTML DIVに表示されます。それは素晴らしい...

検索結果はフォームに包まれ、リンクとして表示されます。このラッパー関数の場所がHandlerPage.phpである：

function createLink($pri_key,$button_name,$file_to_call, $other){  
     $html_str = "<form id='tool_form' action='".$file_to_call."' method='post'>"; 
     $html_str .= "<input style='display:none;' name='prikey' type='text' value='".$pri_key."' >"; 
     $html_str .= "<input style='display:none;' name='compt_prikey' type='text' value='".$other."' >"; 
     $html_str .= "<input id='view_button' type='submit' value='".$button_name."' class='no_button'>"; 
     $html_str .= "</form>"; 
     return $html_str; 
} 

リンク上clickへのユーザのために待機しているJQueryイベントハンドラがあります。ただし、このイベントハンドラは決して呼び出されません。 フォームは送信されますが、イベントハンドラは呼び出されません。は、フォームが送信され

$("#tool_form").submit(function(){ 
    //some code 
    return true; 
}); 

、またはより良いまだ（また、別のフォームとイベントハンドラ、期待通りに機能しMainPage.phpにコーディングの両方が。あり）、どのページにイベントがトリガされますか？にHandlerPage.phpまたはMainPage.php？私はそれがHandlerPage.phpでトリガーされていると仮定していますが、私は理由を理解できません....

また、同じ質問で複数の検索結果に問題がありますか？代わりにクラスでイベントハンドラを使用する必要がありますか？

Answer 1

私は正しく、について説明をundestand場合：

あなたMainPage.php内のJavaScriptコードは、MainPage.php（？右）に表示されるHTMLコードを返すHandlerPage.phpへのAJAX呼び出しを行います。その場合

、イベントリスナーは、あなたのMainpage.php

に開始しかし、コードはそれが機能するためにはDOMに追加された後にリスナーをバインドする必要がありますする必要があります。

私は頻繁にはJavaScriptによるアクションインターセプトの応答にその場でHTMLフォームを作成し、ここで私は通常私のコードを整理する方法です：

1 - 「ダイナミック」フォームが 2と呼ばれるためにトリガアクション - 特定の関数は動的フォームを生成します - DOMに動的フォームを追加します - > THENは非推奨のイベントをバインド解除する専用関数を呼び出します（必要な場合） - > THENはイベントをバインドする専用の関数を呼び出します新しい作成されたフォーム）

意味がありますか？

そして、あなたはCSS対IDSに関する質問に答えるために：ここで

をidは常に一意である必要がありますので、どちらかあなたはクラスや固有のIDを使用する例を示します。

$(document).ready(function() { 
 
    $('#btn-add-item').click(function(event) { 
 
    event.preventDefault(); 
 
    addItem(); 
 
    return false; 
 
    }); 
 
}); 
 

 

 
    function addItem() { 
 
     var $container = $('#items-list'); 
 
     var index = $container.children('.item').length + 1; 
 
     // create new item from 'template' 
 
     var newContent = $('#item-prototype').attr('data-prototype').replace(/__name__/g, index); 
 
     // add item to DOM 
 
     $container.append(newContent); 
 
     // Unbind previous events to items (to reset) 
 
     itemsUnbindActions(); 
 
     // Bind events to items (to reinitialize actions handling for all items: olds/new) 
 
     itemsBindActions(); 
 
    } 
 

 

 
    function itemsUnbindActions() { 
 
     $('.item-form').unbind('submit'); 
 
    } 
 

 

 
    function itemsBindActions() { 
 
     $('.item-form').submit(function(event) { 
 
     event.preventDefault();// prevent 'normal' form submission 
 
     // call a function or do whatever you need (ajax call or something) 
 
     exampleFunction($(this).attr('rel')); 
 
     return false;// prevent 'normla' form submission (old broawsers) 
 
     }); 
 
    } 
 

 
    function exampleFunction(form_index) { 
 
     var alert_message = "value1: " + $('#my-value-1-' + form_index).val() 
 
         + "\nvalue2: " + $('#my-value-2-' + form_index).val(); 
 
     console.log(alert_message); 
 
    }

/* we don't need item-prototype to be visible */ 
 
    #item-prototype { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="container"> 
 
     <a href="#" id="btn-add-item">add an item</a> 
 
     <div id="items-list"></div> 
 
    </div> 
 

 
    <!-- This div is used to provide duynamic form template: __name__ will be replace by an unique value (counter) --> 
 
    <div id="item-prototype" data-prototype='<div class="item" id="item-__name__"> 
 
    \t <form action="" method="POST" class="item-form" rel="__name__"> 
 
    \t \t <input type="text" name="my_value_1[__name__]" id="my-value-1-__name__"> 
 
    \t \t <input type="text" name="my_value_2[__name__]" id="my-value-2-__name__"> 
 
    \t \t <input type="submit" class="btn-item-submit" value="submit"> 
 
    \t </form> 
 
    </div>'></div>