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

Question

我想知道为什么.on在AJAX调用之后从未调用Jquery 来重新绑定我的提交按钮,因为on假设要替换.bind我无法理解这是问题所在.但我尝试了各种各样的东西,唯一有用的是用.bind而不是.on.

我的表单附加到下拉列表中,该列表将在单击时在表单中生成新数据.这是在AJAX Get调用上完成的,并且在成功时我选择了表单并使用:

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

然后我尝试了

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

诚然,我从一个从未回答过的问题中得到了上述内容. jQuery的Ajax的形状使用-的onsubmit

我也尝试将on submit附加到body元素,因为它不会随着$('.container').on('submit','#formname', function(){})这里建议的AJAX函数而改变: jquery绑定函数和ajax调用后的触发器

但那也被忽略了.然后我尝试将'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对于所有情况都是更安全的"默认" :)