Question

以下代码有什么问题？我在这里错过了一些基础知识吗？

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery.min.js" ></script>
    </head>
    <body>
    <script>
        function myfun() {
            $('#inputtext').val('hello world');
        } ;
        $('#fillbutton').click(function(){ myfun();});
    </script>
        <input type="text" id="inputtext" name="inputtext" value="" />
        <input type="button" id="fillbutton" value="Fill with Text"/>
    </body>
</html>

我期待代码中出现以下行为。用户点击“填充文字”按钮。那么myfun（）会将hello世界放在文本字段区域内。虽然我可以从Google Chrome javascript控制台调用myfun（）并查看预期结果，但这不起作用。请帮帮我。

Answer 1

您必须在文档准备就绪后放置侦听器，请参阅此代码

$(document).ready(function(){
    $('#fillbutton').click(function(){ myfun();});
});

Answer 2

您的jQuery事件无效，因为您在dom准备好之前绑定了此事件。将您的脚本放入$(document).ready(function(){})

<script>
   $(document).ready(function(){
        function myfun() {
            $('#inputtext').val('hello world');
        } ;
        $('#fillbutton').click(function(){ myfun();});
   })
</script>

Answer 3

当HTML不存在时，您正在绑定事件

以下行绑定事件

`   $('#fillbutton').click(function(){ myfun();});`

替代

a）在关闭</body>代码

之前将代码放在底部

        <!DOCTYPE html>
        <html>
            <head>
                <script type="text/javascript" src="jquery.min.js" ></script>
            </head>
            <body>
            <script>
                function myfun() {
                    $('#inputtext').val('hello world');
                } ;
                $('#fillbutton').click(function(){ myfun();});
            </script>
                <input type="text" id="inputtext" name="inputtext" value="" />
                <input type="button" id="fillbutton" value="Fill with Text"/>
            <script>
                $('#fillbutton').click(function(){ myfun();});
            </script>               
            </body>
        </html>

b）或用户jquery ready函数

        <!DOCTYPE html>
        <html>
            <head>
                <script type="text/javascript" src="jquery.min.js" ></script>
            </head>
            <body>
            <script>
                function myfun() {
                    $('#inputtext').val('hello world');
                } ;

                $(document).read(function(){
                   $('#fillbutton').click(function(){ myfun();});
                })
            </script>
                <input type="text" id="inputtext" name="inputtext" value="" />
                <input type="button" id="fillbutton" value="Fill with Text"/>           
            </body>
        </html>

Answer 4

您需要在ready事件中包含您的代码：这将等待页面完全加载并运行该功能。因为要在页面上未加载的元素上添加事件，所以事件不会被绑定。

$(document).ready(function(){
    $('#fillbutton').on('click', myfun);
});

文档：https://api.jquery.com/ready/

指定在DOM完全加载时要执行的函数。

Answer 5

为您的输入元素添加如下所示的“onclick”属性。它会起作用。

 <input type="button" id="fillbutton" onclick="return myfun();" value="Fill with Text"/>

Answer 6

包装您的js代码$(function(){ })

$(function(){
    function myfun() {
        $('#inputtext').val('hello world');
    };
    $('#fillbutton').click(function() {
        myfun();
    });
})

无法从jQuery事件

6 个答案: