使用Javascript查找元素到Ajax响应中

时间:2016-04-25 15:33:41

标签: javascript php jquery ajax

我有一个带有一些输入,选择和其他的表单,我写了一个“搜索栏”,它将发送一个结果的Ajax请求,以找到一个附加到表单的联系人:

index.php - 表格

<p><label for="q">Rechercher un contact</label>
<input type="text" class="form-control" name="q" id="q" />
</p>
<div id="results">Veuillez saisir un élément de recherche</div>

index.php - Ajax

$(document).ready( function() {
    $('#q').keyup( function(){
        $field = $(this);
        $('#results').html('Veuillez saisir un élément de recherche');
        $('#ajax-loader').remove();
        if($field.val().length > 2 ) {
            $.ajax({
                type : 'GET',
                url : 'contact.search.php',
                data : 'q='+encodeURIComponent($(this).val()),
                beforeSend : function() {
                    $field.after('<img src="assets/img/ajax-loader.gif" alt="loader" id="ajax-loader" />');
                },
                success : function(data) {
                    $('#ajax-loader').remove();
                    $('#results').html(data);
                    console.log(data);
                }
            });
        }       
    });
});

文件contact.search.php正在处理请求,并将使用以下元素回显表: 表格1}} 结果TR:<table id = contactResult>

contact.search.php

<tr class = select>

然后用户必须单击其中一个TR以选择所需的联系人,我需要将此选项显示到将用于保存表单的其他输入中。但是当我尝试用这个脚本捕获这些数据时:

的Javascript

while ($ligne = sqlsrv_fetch_object($query)) {
    $body .= "
            <tr class='select'>
                <td class='item-nom'>".$ligne->nom."</td>
                <td class='item-prenom'>".$ligne->prenom."</td>
                <td class='item-tel'>".$ligne->tel."</td>
                <td class='item-division'>".$ligne->division."</td>
                <td class='item-direction'>".$ligne->direction."</td>
            </tr>";
}

console show me“[object Object] / [object Object] / [object Object] / [object Object] / [object Object] /”

我试着按照这个提示:

http://jsfiddle.net/65JPw/2/

但它仅在数据位于初始页面时才有效,而不是在Ajax查询加载内容时。

有人可以帮助我让它发挥作用吗?我希望通过将每个td的Ajax结果显示数据中的tr单击到控制台中。谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

除非你使用这个,否则你只是引用了所有指定的类。

 $(document).on("click","#contactResult tr",function(){ 
        var nom=$(this).find( "td.item-nom" ).html();
        var prenom=$(this).find( "td.item-prenom" ).html();
        var tel=$(this).find( "td.item-tel" ).html();
        v.ar division=$(this).find( "td.item-division" ).html();
        var direction=$(this).find( "td.item-direction" ).html();
        console.log(nom + " / " + prenom + " / " + tel + " / " + division + " / " + direction + " / ");
        });