Как вставить автозаполнение jquery в текстовое поле сгенерированное inhtml

Question

Автозаполнение jquery показывает список всех пользователей в базе данных, когда в текстовое поле вводится как минимум 2 символа. Автозаполнение работает с нормальным полем ввода, но когда genereated через innerHTML, он не работает.

автозаполнения работает на следующее поле: -

<input type="text" id="j_d_permit_by[]" name="j_d_permit_by[]" > 

щелчку на кнопке добавить другие поля, а также вызов функции addjobdesc: -

<img src="images/add.png" width="12" height="12"> <a href="javascript: addjobdesc();">Add New Job Description</a><br /> 

Функция: -

 function addjobdesc() { 
    var div = document.createElement('div'); 

     div.className = 'row'; 

     div.innerHTML = '<table id="tblObs" name="tblObs" width="70%" bgcolor="#CCCCCC"><tr bordercolor="#FFFFFF"> 
    <td colspan="5"><b>Job Description (Work Ppermit/ Activity)</b></td></tr> 

<tr bgcolor="#33CC00"> 

    <td ><center> <b>Exact Location</b> </center></td> <td><b><center>Permit Initiated By<br />/<br />Activity Supervised by</center></b></td> 

    <td><b><center>Permit Accepted By<br />/<br />aActivity Executor</center></b></td><td><b><center>For What Permit Issued</center></b></td> 

    <td><b><center>Observation</center></b></td></tr> 
    <tr><td><center><select name="s_area[]" id="s_area" onchange="addSubArea()"> 
    <option value="0">Chose Sub Area</option></select></center></td> 

    <td><input type="text" id="j_d_permit_by_add" name="j_d_permit_by[]"></td> 

    <td><center><select id="j_d_accept_by[]" name="j_d_accept_by[]" ><option value="0">Select User</option><?php $users = getUserS(); 
    while($usersss = mysql_fetch_array($users)){ ?> 
    <option value="<?php echo $usersss[0];?>"><?php echo $usersss[4]." ".$usersss[5]; ?></option> 
    <?php } ?> 
    </select></td> 

    <td><center><textarea name="permit_ref[]" cols="30"> </textarea></center></td> 

<td><center><textarea name="obs_permit[]" id="obs_permit" cols="30"></textarea></center></td></tr></table><input class="submit" type="button" value="Remove" onclick="removeR0ow__(this)">'; 

    <!--<input type="hidden" name="j_d_Location[]" id="j_d_Location" value="" /><input type="text" name="area_Location[]" id="area_Location" value="" readonly="readonly" />--> 

    document.getElementById('job_desc').appendChild(div); 

jQuery(document).ready(function(){ 
      $('#j_d_permit_by_add').autocomplete({ 
        source: 'suggest_name.php', 
        minLength:2 
        }); 
      }); 

    var Max_Length = parseInt(document.getElementsByName('s_area[]').length)-1; 
    document.getElementsByName('s_area[]').item(Max_Length).innerHTML = ''; 
    document.getElementsByName('s_area[]').item(Max_Length).innerHTML = document.getElementById('sarea_div').innerHTML; 
    } 

Я хочу, чтобы автозаполнение работало на сгенерированном поле j_d_permit_by [] в i nnerHTML.

Настоятельно оцените вашу помощь.

Answer 1

У вас есть связь autocomplete в jQuery(document).ready, но в это время нет ввода с id =j_d_permit_by_add и, следовательно, функция не привязывается ко входу. Вы генерируете вход динамически, так что вы должны связать autocomplete функцию следующим образом ..

Попробуйте это Назначает функцию автозаполнения:

jQuery(document).ready(function(){ 
    $(document).on('#j_d_permit_by_add', selector, function() { 
     $(this).autocomplete({ 
      source: 'suggest_name.php', 
      minLength:2 
     }); 
    }); 
}); 

Вы можете обратиться https://stackoverflow.com/a/25114244/1659563

@Guruprasad также право , вы можете привязать функцию autocomplete после того, как динамический динамический вход будет введен в function addjobdesc()