在AJAX查询之后，jQuery重新绑定vs绑定 [英] JQuery rebinding on vs bind after AJAX query

问题描述

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

I would like to know why Jquery's .on was never called to rebind my submit button after a AJAX call, Since on is suppose to replace .bind I could not fathom that it was the problem. but i tried various things and the only thing to have worked was to use .bind instead of .on.

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

My form is attached to a dropdown list that will generate new data into the form on click. This was done on a AJAX Get call and on success i was selecting the form and using:

$（'＃formname'）。on（ 'submit'，function（）{}）

然后我尝试了

$（'＃formname'）。on（'submit'，'form'，function（）{}）

不可否认，我从一个从未回答的问题中得到了上述内容。
jquery-ajax-form-using-onsubmit

admittedly i got the above from a question that was never answered. jquery-ajax-form-using-onsubmit

我还尝试将on submit附加到body元素，因为它不会随着AJAX函数 $（'。container'）而改变.on（'submit' ，'＃formname'，function（）{}）建议：
jquery在ajax调用后绑定函数和触发器

I also tried attaching the on submit to the body element as it doesn't change with the AJAX function $('.container').on('submit','#formname', function(){}) suggested here: jquery bind functions and triggers after ajax call

但是也被忽略了。然后我尝试将'submit'的类型替换为'button'，然后分配 .on（'click'等等... 以防你无法重新绑定提交按钮后表单已经到达DOM。

but that was also ignored. I then tried replacing the type of 'submit' to 'button' then assign .on('click', etc... in case you could not rebind a submit button after the form had reached the DOM.

但唯一可行的是调用 .bind ，我输了我想要使​​用正确的标准。我完成的代码看起来像这样，注意哪里有 .bind 它以前是 .on 未被调用。

but the only thing that worked was calling .bind, i am lost as i am wanting to use the correct standards. my completed code looks like so, note wherever there is a .bind it was previously an .on which was not invoked.

<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>

推荐答案

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

It looks like you got very close to the correct solution, but got tripped up by a minor detail.

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

Your third example should have worked,

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

但容器可能应该是'。container'或
'＃container'，甚至只是 document as 'container'将选择容器类型的HTML元素。

but container probably should have been '.container' or '#container', or even just document as 'container' would select a HTML element of type container.

对名为container的类尝试此操作：

Try this for a class named container:

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

或者这是容器ID：

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

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

Or just use the document object (not a selector, hence no quotes)

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

或使用body元素：

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

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

Basically the deferred syntax of on binds to an element that will stick around for the life of the page, listening for the chosen event, and then selecting the target element via the selector supplied in the second parameter.

更新：由于与使用<$ c的样式相关的错误委托事件中的$ c>'body'是一个坏主意。您的默认值应为 document 如果没有其他更接近/方便的话。问题源于可能的样式问题，其中 body 元素的计算高度 0 并且没有收到任何问题鼠标事件。 'body'可能会在该实例中使用提交事件，但 document 所有案例，c $ c>是一个更安全的默认：）

Update: Due to a bug related to styling using 'body' in delegated events is a bad idea. Your default should be document if nothing else is closer/convenient. The problem stems from a possible styling issue, where the body element gets a computed height of 0 and does not receive any mouse events. 'body' will likely work with submit events in that instance, but document is a safer "default" for all cases :)

这篇关于在AJAX查询之后，jQuery重新绑定vs绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！