javascript - JQuery bind() 导致的异常行为

Question

我正在使用 jQuery 将事件附加到动态创建的 anchor 标记，但是我得到了一个不寻常的效果，我现在将对此进行解释。

首先，这是我的jquery

$('#compresult').bind('click', 'a.con_add', function(e){
            console.log(e);
            $companyName = $('#comp_staff option:selected').text();
            $companyId = $('#comp_staff option:selected').val();
            $type = 'company';
            //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){});
        });

a.con_add 是页面首次加载时不存在的 anchor 标记的类，这是该标记的 html:

 <select style="width:300px" name="comp_staff" id="comp_staff">
           <option value="0">Select Contact...</option>
           <option value="25280">Person1</option>
           <option value="25274">Person2</option>
           <option value="162961">Person3</option>
           <option value="25275">Person4</option>
           <option value="139848">Person5</option>
           <option value="25279">Person6</option>
    </select>
    <a href="#" class="con_add">Add Tag</a>

奇怪的行为是，当我更改此选择菜单的值而不是单击 anchor 标记时，会触发 click 事件。我的猜测是该事件被绑定(bind)到包含选择菜单的整个div？

非常感谢任何帮助。

Answer 1

您正在使用 .bind()，但正如您所推测的那样，这确实将单击事件绑定(bind)到整个容器。只需将 .bind 更改为 .on，您的事件委托(delegate)就应该可以工作。