JQuery 绑定 () 导致的异常行为

Unusual behaviour resulting from JQuery bind( )

本文关键字:异常 绑定 JQuery      更新时间:2023-09-26

我正在使用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是页面首次加载时不存在的锚标记类,则这是该标记的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>

奇怪的行为是,当我更改此选择菜单的值而不是单击锚标记时,会触发click事件。我的猜测是该事件正在bind到包含选择菜单的整个div 中?

任何帮助都非常感谢。

您正在使用.bind(),但正如您理论化的那样,这确实将 click 事件绑定到整个容器。只需将该.bind更改为.on,您的活动委派就可以工作。