Javascript 发布附加jQuery的动态输入

我发现了多个相同的问题，包括：

大多数问题都是由于在表/div中打开表单或HTML出现其他问题造成的。我不相信我有这两个问题；我怀疑我的javascript需要调整

我使用jQuery是因为：

单击“添加”链接时，一个新表行被追加到

tbody.newRow

单击

.remove

时，系统会要求您确认。确认后，将删除该行

当

input.Value

失去焦点时，表单通过ajax提交

jQuery：

$（文档）.ready（函数（）{
$（“.add”）。在（'click'，function（）上{
$（“tbody.newRow”）.append(
''
);
});
$（“tbody”）。在（'click'，'remove'，function（）上{
$（this.parent（）.append）($(
''
))
$（this.remove（）；
});
$（“tbody”）。在（'click'，'removeConfirm'，函数（）上{
$（this.parent（）.parent（）.parent（）.remove（）；
});
$（“tbody”）。在（'click'，'removeCancel'，函数（）上{
$（this.parent（）.parent（）.append）(
'');
$（this.parent（）.remove（）；
});
var formTwo=$（'.ajaxTwo'）；//联系方式
//表格提交活动
$（“.Value”）.blur（函数（）{
$.ajax({
键入：“POST”，//表单提交方法get/POST
数据类型：'html'，//请求类型html/json/xml
数据：formTwo.serialize（），//序列化表单数据
成功：功能（数据）{
url:'functions.php'；//表单操作url
},
错误：函数（e）{
控制台日志（e）
}
});
});
});

html表单。ajax可以很好地处理未动态添加的现有行。添加行位于表尾，看起来很漂亮。表单以数组形式发布

最后是php。每一行都用PDO准备的语句插入到我的数据库表中

if（isset（$\u服务器['HTTP\u X\u请求的\u带有']））{
如果（isset（$_POST['NewJobLeviesId']））{
对于（$i=0；$iprepare（$sql）；
$q->execute（数组（':JobLeviesId'=>（$NewJobLeviesId），':Value'=>（$NewValue），':MasterId'=>（$MasterId），':LUPChoiceId'=>（$LUPChoiceId），':SortOrder'=>（$SortOrder））；
}
}
}

---

同样，这工作得非常好。只有动态添加的输入有问题。我缺少什么？

动态创建的dom元素没有任何附加到

$（文档）上的事件。就绪（…

，因为在附加事件时它们还不存在。因此

$（'.Value'）.blur（…

stuff只附加到第一个表单，而不是将来的表单。因此，每次创建新行时都会附加事件，因此可能类似于以下内容：

首先，将绑定操作委托给它自己的功能

function attachSubmitEvent() {
    // form submit event
    //remove old events first
    $(".Value").off();
    $(".Value").blur(function () {
        var formTwo = $('.ajaxTwo'); // contact form
        $.ajax({
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: formTwo.serialize(), // serialize form data 
            success: function (data) {
                url: 'functions.php'; // form action url
            },
            error: function (e) {
                console.log(e)
            }
        });
    });
}

attachSubmitEvent();

然后在您的document.ready中调用该函数

function attachSubmitEvent() {
    // form submit event
    //remove old events first
    $(".Value").off();
    $(".Value").blur(function () {
        var formTwo = $('.ajaxTwo'); // contact form
        $.ajax({
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: formTwo.serialize(), // serialize form data 
            success: function (data) {
                url: 'functions.php'; // form action url
            },
            error: function (e) {
                console.log(e)
            }
        });
    });
}

attachSubmitEvent();

然后，为了确保它们也连接到新元素，在创建新元素时再次调用它

$(".add").on('click', function () {
$("tbody.newRow").append('<tr><td><input type="text" name="NewJobLeviesId[]" class="JobLeviesId" /><input type="text" name="NewValue[]" class="Value" /><input type="text" name="MasterId[]" class="Values" /><input type="text" name="LUPChoiceId[]" class="Values" /><input type="text" name="SortOrder[]" class="Values" /></td><td class="removeSelection"><a href="#" class="remove">Remove</a></td></tr>');
attachSubmitEvent(); //now everyone has the event attached.
});

$（.add”）。在（'click'，函数（）{
$（“tbody.newRow”）.append（“”）；
attachSubmitEvent（）；//现在每个人都附加了事件。
});

对于表单提交事件，请尝试：

$("tbody").on('focusout', '.Value', function() {
    ...
});

---

您也可以在此事件处理程序中使用

blur

，但为了清晰起见，文档建议使用

focusout

（请参阅jQuery on（）方法文档的“附加注释”部分：）

做了一个更改。您遗漏了变量：var formTwo=$（“.ajaxTwo”）；我将其添加到函数中，并按照您的描述工作。谢谢！