Question

我想知道为什么在AJAX调用之后Jquery的.on从未被调用来重新绑定我的提交按钮，因为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

但也被忽略了。然后我尝试将'submit'的类型替换为'button'，然后分配.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>

Answer 1

看起来你非常接近正确的解决方案，但是被一个小细节绊倒了。

你的第三个例子应该有效，

$('container').on('submit','#formname', function(){})

但container可能应该是'.container'或 '#container'，甚至仅document 'container'会选择容器类型的HTML元素。

尝试使用名为container的类：

$('.container').on('submit','#formname', function(){})

或者这是容器的id：

$('#container').on('submit','#formname', function(){})

或者只使用文档对象（不是选择器，因此没有引号）

$(document).on('submit','#formname', function(){})

或使用body元素：

$('body').on('submit','#formname', function(){})

基本上，on的延迟语法绑定到一个元素，该元素将在页面的生命周期内停留，监听所选事件，然后通过选择器选择目标元素在第二个参数中提供。

更新：由于在委派活动中使用'body'进行样式设置相关的错误是一个坏主意。如果没有其他更接近/方便的话，您的默认值应为document。问题源于可能的样式问题，body元素的计算高度为0，并且不会收到任何鼠标事件。 'body'可能适用于该实例中的submit个事件，但document对于所有案例来说是一个更安全的“默认”：）

在AJAX查询之后，jQuery重新绑定vs绑定

1 个答案: