Блог

Я пытаюсь отправить форму, встроенную в javascript, используя функцию click, прикрепленную к вложенному div. Я установил тип кнопки для отображения none, используя встроенную таблицу стилей, но при нажатии на форму, вокруг которой я установил границу, ничего не происходит. Это моя попытка:

это код javascript со встроенной в него формой

 function fetchAllActiveUsers() {
    ...
    xhr.onload = function (response) {
        try {
            if (xhr.status === 200) {
                ...
                var users = '';
                ...
                for (var i = 0; i < json.length; i  ) {

                users  =   '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>'   json[i].email   '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="' json[i].email '" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="' sessionVar '" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'  json[i].complaints  '</div><hr style="margin:1px; padding:0">';

                }

                active_users.innerHTML = users;
                } else {
                alert('Request failed.  Returned status of '   xhr.status);
            }
        } catch (e) {
            console.log(e);
        }
    };
    xhr.send();
}
  

это код jquery

 $(".containers").click(function() {
      $(this).closest("form").submit();
});
  

моя задача состоит в том, чтобы нажать на div, чтобы он отправил форму, но она не работает.

Пожалуйста, помогите

Во-первых, вы не можете привязывать события к элементам, которые еще не существуют. Во-вторых, closest смотрит на предков, а не на потомков.

Итак, вам нужно использовать делегирование событий и find ()

 $(document).on("click", ".containers", function() {
      $(this).find("form").submit();
});
  

Приведенный выше ответ работает, и это хорошо, но было бы более эффективно, если бы вы не использовали делегирование только для одного элемента, делегирование лучше, когда вам нужно прикрепить прослушиватель событий к нескольким элементам. Как было сказано в приведенном выше ответе, вы не можете привязывать события к элементам, которые еще не были добавлены в DOM, что означает, что теги формы будут добавлены в DOM сразу после того, как это было выполнено active_users.innerHTML = users; , поэтому вы также можете исправить, выполнив следующее

 xhr.onload = function (response) {
    try {
        if (xhr.status === 200) {
            ...
            var users = '';
            ...
            for (var i = 0; i < json.length; i  ) {

            users  =   '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>'   json[i].email   '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="' json[i].email '" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="' sessionVar '" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'  json[i].complaints  '</div><hr style="margin:1px; padding:0">';

            }

            active_users.innerHTML = users;
            // Adding event listener to submit the form
            var formEl = document.querySelector('.containers form');
            formEl.addEventListener("click", function (e) {
                 // Submitting the form
                 e.currentTarget.submit();
            }, false);
            } else {
            alert('Request failed.  Returned status of '   xhr.status);
        }
    } catch (e) {
        console.log(e);
    }
};