javascript - 阻止事件通过 div JQuery 中的选择菜单传播

Question

我有一个问题正在尝试解决。基本上我试图将事件监听器绑定(bind)到 div 中的某些 select 菜单。这是我的代码(每个下拉列表几乎都是相同的)

$('#compresult').bind('click', 'a.con_add', function(e){
            e.stopPropagation();
            console.log('choose this contact');
            $contact_name = $('#comp_staff option:selected').text();
            $contactId = $('#comp_staff option:selected').val();
            $type = 'contact';
            $('#item_name').html(" - " + $contact_name);
            $('#comp_name').val($contact_name);
            $('#comp_id').val($contactId);
            $('#type').val($type);
            $('#apply_tags').show();
            $('#active_tags').show();
            $('#doneBtn').show();
            $('#tag_results').load('pages/ajax/query_tags.php', {'query':'A', 'id':$contactId, 'type':$type});
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $contact_name, 'id': $contactId, 'type': $type},function(response, status, xhr){});
        });

        //Event Listener for the COLUMNS Dropdown.
        $('#compresult').bind('click', 'a.col_add', function(e){
            e.stopPropagation();
            console.log('choose this column');
            $column_name = $('#comp_cols option:selected').text();
            $columnId = $('#comp_cols option:selected').val();
            $type = 'column';
            $('#item_name').html(" - " + $column_name);
            $('#comp_name').val($column_name);
            $('#comp_id').val($columnId);
            $('#type').val($type);
            $('#apply_tags').show();
            $('#active_tags').show();
            $('#doneBtn').show();
            $('#tag_results').load('pages/ajax/query_tags.php', {'query':'A', 'id':$columnId, 'type':$type});
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $column_name, 'id': $columnId, 'type': $type},function(response, status, xhr){});
        });

        //Event Listener for the SUPPLEMENTS Dropdown.
        $('#compresult').bind('click', 'a.sup_add', function(e){
            e.stopPropagation();
            console.log('choose this Supplement');
            $supplement_name = $('#comp_sups option:selected').text();
            $supplementId = $('#comp_sups option:selected').val();
            $type = 'supplement';
            $('#item_name').html(" - " + $supplement_name);
            $('#comp_name').val($supplement_name);
            $('#comp_id').val($supplementId);
            $('#type').val($type);
            $('#apply_tags').show();
            $('#active_tags').show();
            $('#doneBtn').show();
            $('#tag_results').load('pages/ajax/query_tags.php', {'query':'A', 'id':$supplementId, 'type':$type});
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $supplement_name, 'id': $supplementId, 'type': $type},function(response, status, xhr){});
        });

        //Event Listener for the PROGRAMMES Dropdown.
        $('#compresult').bind('click', 'a.prog_add', function(e){
            e.stopPropagation();
            console.log('choose this Programme');
            $programme_name = $('#comp_progs option:selected').text();
            $programmeId = $('#comp_progs option:selected').val();
            $type = 'supplement';
            $('#item_name').html(" - " + $programme_name);
            $('#comp_name').val($programme_name);
            $('#comp_id').val($programmeId);
            $('#type').val($type);
            $('#apply_tags').show();
            $('#active_tags').show();
            $('#doneBtn').show();
            $('#tag_results').load('pages/ajax/query_tags.php', {'query':'A', 'id':$programmeId, 'type':$type});
            $('#active_tags').load('pages/ajax/get_tags.php', {'name': $programme_name, 'id': $programmeId, 'type': $type},function(response, status, xhr){});
        });

我遇到的问题是，当我单击 div 中上面的任何选择菜单时，事件似乎会遍历每个元素，直到最后一个事件处理程序 a.prog_add 类。我想阻止这种情况发生。我尝试了 e.stopPropagation() 但这似乎没有影响。

我很感激任何帮助，因为我真的不知道下一步该做什么。

Answer 1

event.stopPropagation() 的文档说:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

此语句应该在不久前更新，以包含 .on(event, selector, handler) 语法，它是 .live() 的替代方法>/.delegate() 并在 1.7 版本中引入。

您唯一的选择就是不委派 - 即。将您的处理程序直接附加到相关元素。