Question

我试图在keyup处理程序上验证输入表单，但我的事件没有触发。我试图根据用户输入的有效性来更改图像。我可以记录我的输入变量，但我的处理程序仍然不起作用？

HTML

＆＃13;

<template id="tmplt">
      <form method="post" action="process_user_form_submission.php" class="modal_form">
            <div class="modal_form-container">
              <div class="modal__form-input-title">
                <span class="modal_spans modal_form-name-span">First and Last Name</span>
                <img src="src/images/circle-form.png" class="modal__form--invalid">
              </div>
              <input type="text" name="name" class="modal__input modal_form-container-name form-control form-control-success" required>
            </div>
      </form>
    </template>

＆＃13;

JS

＆＃13;

(function($) {


    var dom;

    // cache necessary dom nodes for this module
    var cacheDOM = function() {
        dom = {};
        dom.document = $(document);
        dom.template = dom.document.find('#tmplt');
        dom.inputModal = dom.template.find('.modal__input');
        dom.formCircle = dom.template.find('.modal__form--invalid');
    };

    // change image based on validity of user input
    var inputModalValid = function() {
        var node = dom.template.prop('content');
        var $input = $(node).find('.modal__input');
        var $check = $(node).find('.modal__form--invalid');
        $input.on('keyup', function() {

            if ($input[0].checkValidity() == true) {
              $check[0].setAttribute("src", 'src/images/checkmark-circle.png');
              console.log($check);
            } else {
                $check[0].setAttribute("src", "src/images/circle-form.png");
              console.log($check);
              
            }
        })
    }

    // initialize the module
    var init = function() {
       cacheDOM();
       inputModalValid();
    };

    init();

    }(jQuery));

＆＃13;

Answer 1

您的代码中存在一些错误：

在cacheDOM中，您无法使用dom.template.find来查找您的元素，因为<template>元素将其内容存储在其{{1}中保存的其他DOM中属性。因此，content和inputModal都是空formCircle个对象。
在jQuery中，inputModalValid和$input都是空的$check个对象。因此，当您稍后尝试为jQuery上的keyup事件附加事件监听器时，您不会将其附加到任何元素。

<强>代码：

$input

处理程序未在关键事件

1 个答案: