简体   繁体   English

jQuery值更改事件

[英]Jquery value change event

I have some code,when I click the button it show me some message.It works on IE good,but dont works on ff or chrome,somebody tell why?Sorry for my poor english. 我有一些代码,当我单击按钮时,它会向我显示一些消息。它在IE上很好用,但在ff或chrome上不起作用,有人告诉为什么吗?对不起,我的英语不好。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> New Document </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
        $(function(){
            $("#test").bind("input propertychange",function(){
                alert("abc");
            });
        });
        function ff() 
                { 
                document.getElementById('test').value=Math.random(); 

    </script>
</head>
<body>
    <input id="test"></input>
    <input id='btn' value="tt" type="button" onclick="ff()" /> 
</body>
</html>

First off, you're missing the closing bracket for the ff function. 首先,您缺少ff函数的右括号。 Secondly the event you should be listening for on the input field is the "change" event, that too only fires off when the text field has focus and you change its value and then click elsewhere in the document (ie it loses focus or is blurred) then the change event is fired. 其次,您应该在输入字段上监听的事件是“更改”事件,该事件也仅在文本字段具有焦点并且您更改其值然后在文档中的其他位置单击时才会触发(即,它失去焦点或模糊不清) ),则触发更改事件。

What you can do instead is either listen for other events such as keyup etc. or trigger a custom change event. 相反,您可以做的是监听其他事件(例如keyup等)或触发自定义更改事件。 Here's the modified/corrected code: 这是修改/更正的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> New Document </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

    <script>    
    jQuery(document).ready(function($) {
        $('#test').on('change', function() {
            alert("abc");
        });

        $('#btn').on('click', function() {
            $('#test').val(Math.random()).trigger('change');
        });
    });
    </script>
</head>
<body>
    <input id="test" value="" />
    <input id="btn" value="tt" type="button" /> 

</body>
</html>

And try to keep away from inline javascript calls such as "onclick= ..." in HTML. 并尝试远离内联JavaScript调用,例如HTML中的“ onclick = ...”。 Whole point is to separate JS, CSS and HTML. 重点是将JS,CSS和HTML分开。

There are some errors in the code: 代码中有一些错误:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> New Document </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script>
    $(function () {
        $('#btn').on('click', function () {
            $('#test').val(Math.random());
            $('#test').trigger('change');
        }); //missing ending }
        $('#test').bind("change paste keyup", function () { // change to a proper listener 
            alert("abc");
        });
    });
    </script>
</head>
<body>
    <input id="test" type="text" value="" />
    <!--             ^ Specify a "type" -->    
    <input id='btn' value="tt" type="button" /> 
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM