当前位置： 文江博客话题详情

jQuery live 问题：在选择列表过滤功能中，live 不适用于 keyup 事件

发布于 2024-11-02 02:23:06 字数 4093 浏览 1 评论 0原文

我有一个 jQuery 脚本，它正在过滤 html 选择列表。 当我使用 keyup 事件时它工作正常，但我最近尝试使用 live("keyup"，但它不起作用。

这是脚本：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <meta name="Distribution" content="Global" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Select list filter</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
//simple keyup
    ;(function($) {
        $.fn.selectFilter = function() {

            var sel = $(this);
            $(this).after("<input style='display: block;' type='text' />");
            $(this).css("display", "block");
            if($(this).attr("size")<2)
            {
                $(this).attr("size", "3");
            }
            $(this).next("input[type='text']").keyup(function(){
                sel.children('option').hide();
                var a = new Array();
                var txt = $(this).val().toLowerCase();
                sel.children('option').each(function(i, selected){
                    var pattern=new RegExp(txt);
                    var value = $(this).text().toLowerCase();
                    if(pattern.test(value))
                    {
                        $(selected).show();
                    }
                });
            }); 
        };
        })(jQuery);

//live keyup    
    ;(function($) {
        $.fn.liveSelectFilter = function() {

            var sel = $(this);
            $(this).after("<input style='display: block;' type='text' />");
            $(this).css("display", "block");
            if($(this).attr("size")<2)
            {
                $(this).attr("size", "3");
            }
            $(this).next("input[type='text']").live("keyup", function(){
                sel.children('option').hide();
                var a = new Array();
                var txt = $(this).val().toLowerCase();
                sel.children('option').each(function(i, selected){
                    var pattern=new RegExp(txt);
                    var value = $(this).text().toLowerCase();
                    if(pattern.test(value))
                    {
                        $(selected).show();
                    }
                });
            }); 
        };
        })(jQuery);
    

    jQuery(document).ready(function(){
        jQuery("#select-list").selectFilter();
        jQuery("#live-select-list").liveSelectFilter();
    });
    </script>
</head>
<body>
<form action="" method="post">
Keyup: 
<select id="select-list" size="5" name='test' style="width:200px">
  <option value='1'>John Smith</option>
  <option value='2'>John Doe</option>
  <option value='3'>Jason Bradley</option>

  <option value='4'>Bob Smith</option>
  <option value='5'>Jane Doe</option>
  <option value='6'>David White</option>
  <option value='7'>Neal Johnson</option>
  <option value='8'>Richard Bradman</option>
</select>
<br /><br />Live keyup: 

<select id="live-select-list" size="5" name='test' style="width:200px">
  <option value='1'>John Smith</option>
  <option value='2'>John Doe</option>
  <option value='3'>Jason Bradley</option>
  <option value='4'>Bob Smith</option>
  <option value='5'>Jane Doe</option>
  <option value='6'>David White</option>

  <option value='7'>Neal Johnson</option>
  <option value='8'>Richard Bradman</option>
</select>
</form>
</body>
</html>

如何解决这个问题？

原文

I have a jQuery script, which is filtering an html select list.
It works fine when I use the keyup event, but I recently tried to use instead the live("keyup", but it doesn't work.

Here is the script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="Description" content="" />
    <meta name="Keywords" content="" />
    <meta name="Distribution" content="Global" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Select list filter</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">
//simple keyup
    ;(function($) {
        $.fn.selectFilter = function() {

            var sel = $(this);
            $(this).after("<input style='display: block;' type='text' />");
            $(this).css("display", "block");
            if($(this).attr("size")<2)
            {
                $(this).attr("size", "3");
            }
            $(this).next("input[type='text']").keyup(function(){
                sel.children('option').hide();
                var a = new Array();
                var txt = $(this).val().toLowerCase();
                sel.children('option').each(function(i, selected){
                    var pattern=new RegExp(txt);
                    var value = $(this).text().toLowerCase();
                    if(pattern.test(value))
                    {
                        $(selected).show();
                    }
                });
            }); 
        };
        })(jQuery);

//live keyup    
    ;(function($) {
        $.fn.liveSelectFilter = function() {

            var sel = $(this);
            $(this).after("<input style='display: block;' type='text' />");
            $(this).css("display", "block");
            if($(this).attr("size")<2)
            {
                $(this).attr("size", "3");
            }
            $(this).next("input[type='text']").live("keyup", function(){
                sel.children('option').hide();
                var a = new Array();
                var txt = $(this).val().toLowerCase();
                sel.children('option').each(function(i, selected){
                    var pattern=new RegExp(txt);
                    var value = $(this).text().toLowerCase();
                    if(pattern.test(value))
                    {
                        $(selected).show();
                    }
                });
            }); 
        };
        })(jQuery);
    

    jQuery(document).ready(function(){
        jQuery("#select-list").selectFilter();
        jQuery("#live-select-list").liveSelectFilter();
    });
    </script>
</head>
<body>
<form action="" method="post">
Keyup: 
<select id="select-list" size="5" name='test' style="width:200px">
  <option value='1'>John Smith</option>
  <option value='2'>John Doe</option>
  <option value='3'>Jason Bradley</option>

  <option value='4'>Bob Smith</option>
  <option value='5'>Jane Doe</option>
  <option value='6'>David White</option>
  <option value='7'>Neal Johnson</option>
  <option value='8'>Richard Bradman</option>
</select>
<br /><br />Live keyup: 

<select id="live-select-list" size="5" name='test' style="width:200px">
  <option value='1'>John Smith</option>
  <option value='2'>John Doe</option>
  <option value='3'>Jason Bradley</option>
  <option value='4'>Bob Smith</option>
  <option value='5'>Jane Doe</option>
  <option value='6'>David White</option>

  <option value='7'>Neal Johnson</option>
  <option value='8'>Richard Bradman</option>
</select>
</form>
</body>
</html>

How can I fix this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

半城柳色半声笛 2024-11-09 02:23:06

问题是 .live() 适用于选择器而不是指定的元素。

引用自文档

为现在和将来匹配当前选择器的所有元素附加一个处理程序。

和

DOM遍历方法不是
支持查找要发送的元素
到.live()。相反，.live() 方法
应该总是在之后直接调用
选择器，如上例所示。

因此，您应该更改将实时事件绑定到

$(this.selector + " + input[type='text']").live("keyup", function(){

this.selector 的方式，将返回使用的原始选择器，并且 + input[type='text'] 是 下一个相邻选择器

实时地址 http://jsfiddle.net/gaby/u9uhV/

The problem is that .live() works with selectors and not specified elements.

Quoting from the docs

Attach a handler to the event for all elements which match the current selector, now and in the future.

and

DOM traversal methods are not
supported for finding elements to send
to .live(). Rather, the .live() method
should always be called directly after
a selector, as in the example above.

So you should change the way you bind the live event to

$(this.selector + " + input[type='text']").live("keyup", function(){

this.selector will return the original selector used and the + input[type='text'] is the next adjacent selector

live at http://jsfiddle.net/gaby/u9uhV/

回复 原文
~没有更多了~

关于作者

彩扇题诗

暂无简介

文章
评论
838 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

陈静维

文章 0 评论 0

深海里的那抹蓝

文章 0 评论 0

给妤﹃绝世温柔

文章 0 评论 0

谢绝鈎搭

文章 0 评论 0

时光清浅

文章 0 评论 0

温柔女人霸气范

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文