【发布时间】：2013-10-14 11:05:25
【问题描述】：
我想知道为什么 Jquery 的 .on 在 AJAX 调用后从未被调用来重新绑定我的提交按钮，因为 on 应该替换 .bind 我无法理解这是问题所在。但我尝试了各种方法，唯一有效的方法是使用.bind 而不是.on。
我的表单附加到一个下拉列表，该下拉列表将在单击时将新数据生成到表单中。这是在 AJAX Get 调用上完成的，成功后我选择了表单并使用：
$('#formname').on('submit',function(){})
然后我尝试了
$('#formname').on('submit','form', function(){})
诚然，我从一个从未回答过的问题中得到了上述信息。 jquery-ajax-form-using-onsubmit
我还尝试将 on submit 附加到 body 元素，因为它不会随此处建议的 AJAX 函数 $('.container').on('submit','#formname', function(){}) 改变：
jquery bind functions and triggers after ajax call
但这也被忽略了。然后我尝试将“提交”的类型替换为“按钮”，然后分配.on('click', etc...，以防在表单到达 DOM 后您无法重新绑定提交按钮。
但唯一有效的是调用.bind，因为我想使用正确的标准，所以我迷路了。我完成的代码看起来像这样，请注意任何有 .bind 的地方，它以前是一个未被调用的 .on。
<script type="text/javascript">
(function ($){
$('select#<?php echo $dropdown; ?>').on('click', function(){
var value = $(this).val();
var form = 'form#<?php echo $gridName; ?>'
$.ajax({
type: "GET",
url: $(form).prop('action') ,
data: { gg:value },
dataType: "html",
cache: false,
success: function(htmlResponse){
var src = $(form , htmlResponse);
$('.page_1col_col1').html( src );
//replace the submit with a input buton to tesk on click
//$('#<?php echo $gridName; ?> input[type="submit"]').prop('type','button');
$('#<?php echo $gridName; ?>').bind('submit',function (){
rowBinding();
//replace the submit with a input btn
$.ajax({
type:"POST",
url: $(form).prop('action'),
dataType: "html",
cache: false
});
});
}
});
});
}(jQuery));
$(document).ready(function(){
$('#<?php echo $gridName; ?>').bind('submit',rowBinding);
});
function rowBinding(){ //stuff}</script>
【问题讨论】：
-
注意，您可以直接将 .bind 替换为 .on，因为 .bind 使用的语法完全适用于 .on。
$('#<?php echo $gridName; ?>').on('submit',function (){在动态元素上使用直接绑定没有任何问题，尤其是当它们只有一个时。 -
在我的情况下它没有，我用 bind 和心爱的替换它应该可以工作，因此我在询问为什么它没有。当我在 Ajax 调用后提交表单时，客户端没有生成任何内容。
标签： javascript jquery ajax