嘗試清除HTML JavaScript中的字段

Question

我正在嘗試創建一個按鈕來清除頁面的特定字段。 這是我所擁有的，但是它不起作用。 不知道該怎么辦。 有些人試圖在另一個主題的表述上幫助我，但是由於我無法使它起作用，所以我提出了這個新問題。

謝謝

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Landing Page</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>

            $('.clear').on('click', function () {
                $('#inputFirstName').val('');
                $('#inputLastName').val('');
                $('#inputEmail').val('');
            });

        </script>

        <style>
            #formTable {
                /*border: 1px solid black;*/
                margin: 0 auto;
            }

            #outer {
                width: 100%;
                height: 700px;
                display: flex;
                align-items: center;
                /*background-color: gray;*/
            }            

            #inner {
                width: 300px;
                height: 350px;
                margin: 0 auto;
                /*background-color: yellow;*/
            }
        </style>

    </h:head>

    <h:body>

        <div id="outer">  
            <div id="inner">

                <h:form class="signupform">

                    <p>Sign-up for more:</p>

                    <table id="formTable">
                        <tr>
                            <td>First Name:</td>
                            <td><h:inputText id="inputFirstName" value="#{visitor.firstName}"/></td> 
                        </tr>
                        <tr>
                            <td>Last Name:</td>
                            <td><h:inputText id="inputLastName" value="#{visitor.lastName}"/></td> 
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td><h:inputText id="inputEmail" value="#{visitor.email}"/></td> 
                        </tr>
                    </table>


                    <p><h:commandButton id="submit" value="Submit" action="#{visitor.registerVisitor()}"/>
                        <h:outputText id="outputText" value="#{visitor.result}"/></p>

                </h:form>

                <button class="clear">Clear</button>

            </div>
        </div>

    </h:body>
</html>

Answer 1

您在元素存在之前調用$('.clear') 。

因此，您要將事件處理程序添加到一個空集中。

您需要在元素之后運行<script>塊。

Answer 2

也許您可以嘗試，而不是：

<script>

    $('.clear').on('click', function () {
        $('#inputFirstName').val('');
        $('#inputLastName').val('');
        $('#inputEmail').val('');
    });

</script>

而是具有：

<script>
    $(document).ready(function () {
        $('.clear').on('click', function () {
            $('#inputFirstName').val('');
            $('#inputLastName').val('');
            $('#inputEmail').val('');
        });
    });
</script>

嘗試清除HTML JavaScript中的字段

問題描述

2 個解決方案

解決方案1
1 2017-02-05 23:17:15

解決方案2
0 2017-02-05 23:35:31

嘗試清除HTML JavaScript中的字段

問題描述

2 個解決方案

解決方案1 1 2017-02-05 23:17:15

解決方案2 0 2017-02-05 23:35:31

解決方案1
1 2017-02-05 23:17:15

解決方案2
0 2017-02-05 23:35:31