进入文本字段时如何在不触发按钮的情况下在 JQuery-Button 中有一个文本字段答案

【问题标题】：How can I have a text field inside a JQuery-Button without the button fireing when going into the textfield进入文本字段时如何在不触发按钮的情况下在 JQuery-Button 中有一个文本字段
【发布时间】：2020-04-27 05:07:27
【问题描述】：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script>
        $(document).ready(function () {
            $('#countButton').on("click", function(){
                target=$('#until').prop("value");
                tl=(""+target).length;
                numberString="";
                for(var i=0; i<=target; i++){
                    numberString+=((""+i).padStart(tl, '0'))+"<br />";
                }
                $("#numbers").html(numberString);
            });
        });</script>
    </head>
    <body>
    <button class="ui-button ui-widget ui-corner-all" id="countButton">Count from 0 to <label for="until"> <input id="until" value="20" style="width: 50px;" type="number" min="1" /> </label>!</button>
    <div id="numbers"></div>
</body>
</html>

这很好用，但是一旦我输入数字字段，按钮就会消失，有没有办法防止它？（我知道为什么按钮会熄灭，并且我知道我可以简单地将字段移到按钮之外，但我真的很喜欢这个设计理念。还要注意（尽管我认为它不会对解决方案产生影响）按钮可能是动态创建的）。

【问题讨论】：

标签： jquery onclick uibutton textfield

【解决方案1】：

这是因为事件从输入字段（id：直到）传播。

只需捕获事件并停止传播。请参阅下面的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Title</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
        <script>
        $(document).ready(function () {
            $('#countButton').on("click", function(){
                target=$('#until').prop("value");
                tl=(""+target).length;
                numberString="";
                for(var i=0; i<=target; i++){
                    numberString+=((""+i).padStart(tl, '0'))+"<br />";
                }
                $("#numbers").html(numberString);
            });
            $('#until').on("click", function(){
                event.stopPropagation();
            });
        });</script>
    </head>
    <body>
    <button class="ui-button ui-widget ui-corner-all" id="countButton">Count from 0 to <label for="until"> <input id="until" value="20" style="width: 50px;" type="number" min="1" /> </label>!</button>
    <div id="numbers"></div>
</body>
</html>

【讨论】：

谢谢，这正是我所需要的。