jQuery 1.4.2使用.delegate更改文本字段

时间:2014-12-11 16:09:46

标签: javascript jquery

我在IE 9中使用jQuery 1.4.2 .delegate函数时出现问题。我很想使用最新版本的jQuery并只使用.on函数,但我被迫使用1.4.2到期到供应商的产品。

我的目标是在文本字段更改时触发功能。所以如果它是空的并且它被设置为" test"然后一个函数将运行。

这是我尝试做的事情,警报从未显示......

<!DOCTYPE HTML>
<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">

            function test(result) {
                var result = result;
                $("#txtTest").val($("#txtTest").val() + result);
            }

            $("body").delegate("#txtTest", "change",function() {
                alert( "Handler for .change() called." );
            });

        </script>
    </head>  

    <body>
            Test: <input type="text" id="txtTest"/><br />
            <input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
    </body>  
</html>

我也尝试过使用myCustomEvent:

<!DOCTYPE HTML>
<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">

            function test(result) {
                var result = result;
                $("#txtTest").val($("#txtTest").val() + result).trigger("myCustomEvent");
            }

            $("body").delegate("#txtTest", "myCustomEvent",function() {
                alert( "Handler for .change() called." );
            });

        </script>
    </head>  

    <body>
            Test: <input type="text" id="txtTest"/><br />
            <input type=button value=Test name="Submit" id="btnTest" onclick="test('testing the call')" />
    </body>  
</html>

提前致谢

1 个答案:

答案 0 :(得分:2)

问题是您将提交按钮命名为"Submit"。这对HTML来说是禁忌!当按钮名为submit时,浏览器默认使用内部提交功能。见下面的[*]。

此外,val()注入不会触发change()事件,因此我们需要手动调用。

Submit更改为xSubmit并手动触发链末尾的change事件并运行。它也应该是一个dom ready包装器:

HTML

 Test: <input type="text" id="txtTest"/><br />
 <input type="button" value="Test" name="xSubmit" id="btnTest" onclick="test('testing the call')" />

JS

 $(function() {
     $("body").delegate("#txtTest", "change", function() {
              alert( "Handler for .change() called." );
           });
});

function test(result) {
    $("#txtTest").val($("#txtTest").val() + result).change();                     
}

演示:

http://jsfiddle.net/at7eoarL/1/

进一步阅读:* - https://issues.apache.org/jira/browse/TAP5-947