Question

我想解决一些问题。基本上我试图将事件监听器绑定到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()的文档说：

由于.live（）方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。同样，.delegate（）处理的事件将传播到它们被委派给的元素;在DOM树中它下面的任何元素上绑定的事件处理程序将在调用委托事件处理程序时执行。因此，这些处理程序可以通过调用event.stopPropagation（）或返回false来阻止委托处理程序触发。

此声明应该在前一段时间更新，包括提及.on(event, selector, handler)语法，它是.live() / .delegate()的替代方法，并在1.7版本中引入。

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

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

1 个答案: