jQuery无法检测到使用AJAX动态添加的锚标签

Question

我正在尝试处理一个页面，该页面正在使用各种PHP文件从数据库加载很多东西。 为此，我使用JQuery来检测何时发生特定事件，然后向所需的PHP文件发出AJAX请求，该文件将输出所需的内容。

它一直运行得很好，但是我遇到了一个问题。 基本上，当用户更改select菜单中的值时，它将生成3个新的select菜单，每个菜单都具有与之关联的特定链接。 他们的想法是他们可以单击此链接Add Tags 。

这是问题所在，由于某种原因，我的JQuery无法检测到新添加的锚标记，因此未处理我的click事件。

我想知道是否有人可以告诉我有关此问题的解决方法，或者我是否做得正确。 我将不胜感激。

页面首次加载时，这是我的html ：

<p>
<select style="width:300px" name="comp" id="comp">
  <option value="0">Select an item...</option>
  <option value="1">test</option>
</select>
<a href="#" id="comp_add">Add Tag</a>
</p>

这是当下拉列表更改时执行的JQuery ：

$('#comp').change(function() {
    var companyId = $(this).val();
    $('#compresult').load('pages/ajax/tag_manager_dropdowns.php',{test:companyId});
    $('#tag_results').load('pages/ajax/query_tags.php', {'query':"A"});
});

这是tag_manager_dropdowns.php文件：

$company_id = $_POST['test']; //Get the Company ID.

//Work out the Type.
$company = new DirectoryCompany($company_id);
$type = $company->getDirectoryCompanyType()->getName();

//All - Contacts
$output .=  "<p>".SelectBuilder::getDirectoryCompanyStaff("comp_staff", $company_id ,'Select Contact...', 'comp_staff', '', 'Select Contact...') . '<a href="#" id="con_add">Add Tag</a><br/>';

if($type === "Radio"){
    $output .= SelectBuilder::getDirectoryCompanyProgramme("comp_prog", $company_id, 'Select Programme...', 'comp_prog') . '<a href="#">Add Tag</a>';
}else{
    $output .= SelectBuilder::getDirectoryCompanyColumn("comp_cols", $company_id, 'Select Column...', 'comp_cols') . '<a href="#">Add Tag</a><br/>';
    $output .= SelectBuilder::getDirectoryCompanySupplement("comp_sups", $company_id, 'Select Supplement...', 'comp_sups') . '<a href="#">Add Tag</a>';
}

$output .= "</p>";

//Return the HTML
echo $output;

这最多可添加三个具有以下ids新下拉菜单

• comp_staff
• comp_prog
• comp_cols
• comp_sups

每个下拉列表后都有一个带有ID的锚标记。 我正在尝试获取对此定位标记的引用，以便可以执行一些代码。

这是我目前尝试引用的方式：

$('#con_add').click(function(e){
            console.log('click');
            e.preventDefault();
            $companyName = $('#comp_staff option:selected').text();
            $companyId = $('#comp_staff option:selected').val();
            $type = 'contact';

            //Display Name of the Company
            $('#item_name').html(" - " + $companyName);
            //Update Hidden Fields of Form
            $('#comp_name').val($companyName);
            $('#comp_id').val($companyId);
            $('#type').val('contact');

            //Make AJAX request to PHP file which will generate the Tags for the Object
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $companyName, 'id': $companyId, 'type': $type},function(response, status, xhr){});
        });

但是，它不起作用，我认为一定是因为在加载页面时定位标记不存在。 有任何想法吗？

Answer 1

第一个ID必须是唯一的，正如A. WolF所说，您的HTML无效“ P元素不能包含SELECT元素” ，您需要使用事件委托，例如：

$(document).on('çlick', 'a', function(e){
            console.log('click');
            e.preventDefault();
            $companyName = $('#comp_staff option:selected').text();
            $companyId = $('#comp_staff option:selected').val();
            $type = 'contact';

            //Display Name of the Company
            $('#item_name').html(" - " + $companyName);
            //Update Hidden Fields of Form
            $('#comp_name').val($companyName);
            $('#comp_id').val($companyId);
            $('#type').val('contact');

            //Make AJAX request to PHP file which will generate the Tags for the Object
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $companyName, 'id': $companyId, 'type': $type},function(response, status, xhr){});
        });