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){});
        });