Question

我实现了单击功能的文档，并且还需要在单击ENTER时设置事件。

我的点击文档点击功能：

$(document).on('click', '#customButton', function(evt) {

  // this implementation refresh my page
  $(document).on('keydown', '.current', function(evt) {
    if (evt.keyCode === 13) { // If Enter key pressed
      $('#customButton').click();
    }
  });
});

我实现了Javascript的HTML代码：

<form  method="post" class="newsletter">
    <div class="current">
        <div class="fce-newsletter-form">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="mb-half newsletter-title"><?php the_sub_field('newsletter_title')?></h2>
                    <p class="mb-2 lead">Mit unserem Newsletter erhalten Sie monatlich Informationen rund um das Urlaubsland Österreich und eine Auswahl exklusiver Angebote und Gutscheine!</p>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6">

                        <div class="testFormChange">
                            <div class="form-row">
                                <div class="col-8">
                                    <input class="form-control" id="name_Validation" type="email" placeholder="Ihre E-Mail Adresse *" required/>
                                </div>
                                <div class="col-4">
                                    <input type="button" class="fce-newsletter-form-button btn btn-block btn-primary" id="customButton" value="Weiter">
                                    <input type="hidden" value="step1" name="step">
                                </div>
                            </div>
                        </div>

                    <p class="fce-newsletter-form-note">mit * gekennzeichnete Felder bitte ausfüllen.</p>
                    <p class="fce-newsletter-form-error-message"></p>
                </div>
            </div>
            <input type="hidden" name="form_step" class="form_step" value="1">
        </div>
    </div>
</form>

如您所见，在函数内部您可以看到我测试的“ keydown”函数，但是当我按ENTER键时，页面将刷新，并且单击功能时无法更改文档。有什么建议吗？

Answer 1

keydown和“ click”事件应首先处理。

您可以通过event.preventDefault();阻止任何默认事件。如果您是keyCode =='13'

$(document).on('click','#customButton', function (evt) {
    alert("button clicked");
});
    
 // this implementation refresh my page
$(document).on('keydown','.current', function (evt) {
    if (evt.keyCode === 13) { // If Enter key pressed
        evt.preventDefault();
        $('#customButton').click();
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  method="post" class="newsletter">
    <div class="current">
        <div class="fce-newsletter-form">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="mb-half newsletter-title"><?php the_sub_field('newsletter_title')?></h2>
                    <p class="mb-2 lead">Mit unserem Newsletter erhalten Sie monatlich Informationen rund um das Urlaubsland Österreich und eine Auswahl exklusiver Angebote und Gutscheine!</p>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-md-6">

                        <div class="testFormChange">
                            <div class="form-row">
                                <div class="col-8">
                                    <input class="form-control" id="name_Validation" type="email" placeholder="Ihre E-Mail Adresse *" required/>
                                </div>
                                <div class="col-4">
                                    <input type="button" class="fce-newsletter-form-button btn btn-block btn-primary" id="customButton" value="Weiter">
                                    <input type="hidden" value="step1" name="step">
                                </div>
                            </div>
                        </div>

                    <p class="fce-newsletter-form-note">mit * gekennzeichnete Felder bitte ausfüllen.</p>
                    <p class="fce-newsletter-form-error-message"></p>
                </div>
            </div>
            <input type="hidden" name="form_step" class="form_step" value="1">
        </div>
    </div>
</form>

Answer 2

将一个事件处理程序绑定到另一个事件处理程序中很少是正确的。编写方式，keydown事件处理程序是在用户单击按钮后才创建的。因此，他们必须单击按钮，然后按 Enter 调用第二个处理程序。

分别定义它们。

$(document).on('keydown', '.current', function(evt) {
    if (evt.keyCode === 13) { // If Enter key pressed
        $('#customButton').click();
    }
});

$(document).on('click', '#customButton', function(evt) {
    // do something
});

如何在文档点击功能中设置按键事件？

2 个答案: