3

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

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

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

然后我尝试了

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

诚然，我从一个从未回答过的问题中得到了上述信息。 jquery-ajax-form-using-onsubmit

我还尝试将 on submit 附加到 body 元素，因为它不会随$('.container').on('submit','#formname', function(){})此处建议的 AJAX 函数而改变： 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>
4

1 回答 1

6

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

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

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

但container可能应该是'.container'or '#container'，或者甚至就像document选择'container'容器类型的 HTML 元素一样。

试试这个名为容器的类：

$('.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对于所有情况都是更安全的“默认”:)

于 2013-10-07T18:54:43.497 回答