Question

我正在尝试使用各种PHP文件从一个数据库加载大量内容的页面上工作。为了做到这一点，我使用JQuery来检测特定事件何时发生，然后我向所需的AJAX文件发出PHP请求，该文件将输出所需的内容。

它一直运作良好，但我遇到了一些问题。基本上当用户更改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

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

JQuery没有使用AJAX检测动态添加的锚标记

1 个答案: