javascript - 如何提交带有已创建的附加内容的 <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();
    });

但这似乎不起作用。

那么，当单击该类的“提交”时，如何提交由 createMessage 函数创建的表单？

非常感谢。如果我不够清楚，请告诉我。

Answer 1

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

使用

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

<小时/>

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

当前您使用的称为“直接”绑定(bind)，它仅附加到代码进行事件绑定(bind)调用时页面上存在的元素。

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 。您必须使用.on()使用委托(delegate)事件方法。

一般语法

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

示例

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