Question

我使用Bootstrap 4

添加了以下HTML

    <div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="ss()"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
    </form>
</div>

单击搜索按钮时，整个页面刷新，我添加了OnClick（）事件并将其绑定到ss（）（仅提醒的自定义函数），但表单仍然刷新。

我需要将搜索按钮绑定到一些JavaScript函数，它将执行实际搜索。怎么样？

Answer 1

＆＃13;

function ss(){
alert("hiiiii");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="javascript:ss()"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

＆＃13;

Answer 2

试试这个。您需要在JavaScript函数中添加return false语句，并在函数调用之前添加return。

＆＃13;

function ss(){
alert("hiiiii");
return false;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-3 col-md-3 search-header">
    <form class="navbar-form" role="search">
        <div class="input-group">
            <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default btn-search" onclick="return ss();"><i class="fa fa-search"></i>search</button>
            </div>
        </div>
    </form>
</div>

＆＃13;

如果你想为此使用Jquery，你可能也会看到Jquery event.preventDefault（）方法。

Answer 3

她是代码：

＆＃13;

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="col-sm-3 col-md-3 search-header">
        <form class="navbar-form" role="search">
            <div class="input-group">
                <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term">
                <div class="input-group-btn">
                        <button class="btn btn-default search"onclick="return myFunction()">Click me</button><i class="glyphicon glyphicon-search"></i></button>
                </div>
            </div>
        </form>
    </div>
<script>
function myFunction() {
   alert ("hiiiiiiiiiiii");
   return false;
}

</script>
</body>

</html>

＆＃13;

Answer 4

删除内联onclick属性并在按钮上使用侦听器，如下所示：

var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead

btn.addEventListener('click', ss);

function ss(){
    alert('hello');
}

为防止网页重新加载，请使用preventDefault代替return false，并使用上述代码段：

    var btn = document.querySelector('button'); // I would recommend using a unique `id` for the button and targetting that instead
    
    btn.addEventListener('click', ss);
    
    function ss(e){
        alert('hello');
        e.preventDefault();
    }

<form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control search-box " placeholder="Search" name="srch-term" id="srch-term"/>
        <div class="input-group-btn">
            <button class="btn btn-default btn-search"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
</form>

jsFiddle： https://jsfiddle.net/AndrewL64/n7s90pgt/1/

Bootstrap搜索框单击

4 个答案: