Question

我有一个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>

有人可以帮忙吗？

谢谢！

PS：欢迎提出所有建议。

Answer 1

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

从文档引用

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

和

DOM遍历方法不是支持查找要发送的元素为了活着（）。相反，.live（）方法应始终直接调用选择器，如上例所示。

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

的方式

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

this.selector将返回使用的原始选择器，而+ input[type='text']是next adjacent selector

住在 http://jsfiddle.net/gaby/u9uhV/

Jquery live问题：在select list filter函数中，live不能用于keyup事件

1 个答案: