Question

我制作了一个自定义下拉列表。我希望它的功能类似于HTML中的select标签。当我在下拉列表外单击时，我希望将其删除。但我遇到了问题。下面的代码正常工作，只要我点击一个提示下拉列表的按钮（optionContainer）就会编译它。

var optionContainer = document.createElement('div');
optionContainer.className = 'optionContainer';
button.appendChild(optionContainer);

var clickOutsideEvent = function(){
     $(optionContainer).remove();
};

$(optionContainer).mouseout(function(){
    $(document).delegate('body','click', clickOutsideEvent);
});

$(optionContainer).mouseover(function(){
    $(document).undelegate('body', 'click', clickOutsideEvent);         
});

但是，我需要再添加一行代码才能完成。下面的代码行是在unidented上面的最后一行之后添加的。

$(document).delegate('body','click', clickOutsideEvent);

奇怪的是，这行代码与mouseout事件中使用的行完全相同。但这条线不起作用。

Answer 1

你在$（document）.ready调用中包装了最后一行，所以它在加载jQuery时执行吗？

$(document).ready(function() {
   $(document).delegate('body','click', clickOutsideEvent);
});

单击外部时删除自定义下拉列表

1 个答案: