我如何提交带有 <a> 的表单，该表单已创建附加内容

Question

这是我目前拥有的：

var popupContent = ''
    function createMessage(msg,pl) {
        return [
            "<p>" + msg + "</p>",
            "<form action='" + pl + "' method='post' accept-charset='utf-8'>",
                "<ul class='cd-buttons no_margin'>",
                    "<li><a class='submit'>Yes</a></li>",
                    "<li><a class='popup-close'>No</a></li>",
                "</ul>",
            "</form>",
            "<a class='cd-popup-close popup-close img-replace'>Close</a>"
        ].join('');
    }

    //Accept Employement Request
    $('.popup1').on('click', function() {
        employeeName = $(this).siblings('.js-employee-name').text();
        var message = "Are you sure you want to hire <b>" + employeeName + "</b>?"
        var postLink = "/hire-employee"

        createMessage();

        $(".cd-popup-container").append( createMessage(message, postLink) );
    });

    $('.submit').click(function(){
        $('form').submit();
    });

但这似乎不起作用。

那么当点击 class 提交时，我该如何提交由 createMessage 函数创建的表单？

非常感谢。让我知道我是否不够清楚。

Answer 1

我建议您使用 <button> 而不是锚点，并使用按钮的默认行为。

使用

<button class='submit'>Yes</button>

但是，解决您眼前的问题。

目前您使用的是 "direct" 绑定，它只会附加到您的代码进行事件绑定调用时页面上存在的元素。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

因为您正在动态创建元素。

您需要使用 Event Delegation. You have to use .on() 委托事件方法。

一般语法

$(staticParentElement).on(event, selector, eventHandler);

例子

$(".cd-popup-container").on('click', '.submit', function(event){
    $('form').submit();
    event.preventDefault(); //Cancel default behaviour of anchor
});

我如何提交带有 <a> 的表单，该表单已创建附加内容

How can I submit a Form with <a> that Was Created Appending Stuff

javascript

forms

jquery

submit