JQuery bind()导致的异常行为

时间:2014-11-18 16:43:09

标签: javascript jquery html

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

首先,这是我的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事件。我的猜测是,事件对于包含选择菜单的整个div是bind吗?

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:4)

您正在使用.bind(),但正如您所理论化的那样,将click事件绑定到整个容器。只需将.bind更改为.on即可,您的活动委派应该有效。