提交 after() 表单不使用 Ajax答案

【问题标题】：Submitting after() form does not use Ajax提交 after() 表单不使用 Ajax
【发布时间】：2023-03-25 06:10:02
【问题描述】：

周末的东西。我正在使用 ajaxForm 插件，它工作正常。但是使用 after() 创建的表单只能正常提交到 url 并发布 ajax。

$("a.update-time").live("click", function(event) {

            event.preventDefault(); 
            var row = $(this).attr("id").split('-');

            $("#update-mini-form").remove();

            $(this).after(
                '<div id="update-mini-form"><form method="post" action="' + 'http://drupal.se/timetracker/timetracker/update_time/' + row[1] + '"> ' +
                '<input type="textfield" name="title" value="">' +
                '<input type="textfield" name="event_date" value="">' +
                '<input type="textfield" name="hours" size="2" value="">' +
                '<input type="submit" value="update">' +
                '</form></div>'                 
                );
        });

        $('#update-mini-form').live("submit", function(){

                var row = $(this).closest('a').attr("id").split('-');
                $(this).ajaxForm({
                        url: 'http://drupal.se/timetracker/timetracker/update_time/' + row[1],
                        target:$("div#row-" + row[1]),
                        type: "POST",
                });

        });

【问题讨论】：

离题：你为什么不只有一个表单并移动它而不是删除并重新创建它？那么您将不需要使用 live 注册提交事件。委派事件的正确方法也是使用 on() not live。
你使用什么版本的jQuery？ live() 自 jQuery 1.7 起已停售。
@poelinca，我首先想到了这一点，但被编码人员阻止了。这是一个漫长的一天。早上我会试一试。
这是在 Drupal 7 中，所以最高版本是 1.4.4。令人沮丧，但我现在无能为力。

标签： jquery ajaxform

【解决方案1】：

如果我理解正确，.live() 的工作原理是绑定到文档元素的委托处理程序并侦听冒泡的事件，对吧？正如 Vishal 和 Poelinca Dorin 所指出的，您应该将 .on() 用于当前版本的 jQuery。

我认为您的问题可能是因为您的迷你表单提交处理程序不会阻止默认提交的发生。试试这个：

$("a.update-time").live("click", function(event) {
    event.preventDefault(); 
    var row = $(this).attr("id").split('-');

    $("#update-mini-form").remove();

    $(this).after(
        '<div id="update-mini-form"><form method="post" action="' + 'http://drupal.se/timetracker/timetracker/update_time/' + row[1] + '"> ' +
        '<input type="textfield" name="title" value="">' +
        '<input type="textfield" name="event_date" value="">' +
        '<input type="textfield" name="hours" size="2" value="">' +
        '<input type="submit" value="update">' +
        '</form></div>'                 
        );
});

// Note: You should probably replace $(document) with a more specific container element
$(document).on("submit", "#update-mini-form", function(event){
    event.preventDefault();
    var row = $(this).closest('a').attr("id").split('-');
    $(this).ajaxForm({
        url: 'http://drupal.se/timetracker/timetracker/update_time/' + row[1],
        target:$("div#row-" + row[1]),
        type: "POST",
    });

});

【讨论】：

当然，执行 $(document) 效率不高——您应该将其替换为容器元素以提高性能。由于我对您的 HTML 了解不多，所以我暂时将其保留，以便您查看它是否解决了您的“AJAX 无法正常工作”问题，然后从那里改进它。

【解决方案2】：

好的，我得到了这个工作。我建议使用单一形式，但 live() 仍然是必要的。我猜是因为当您使用 JS 移动/复制某些内容时，它仍然不是页面的一部分。我也有选择器错误，但修复没有帮助。最接近的也是通过移动表单而被杀死，而 live() 对此无济于事。所以我不得不更改系统以将 id 放入表单中。这是我用的：

php:

$output .=  '<div><form method="post" style="display:none" id="update-mini-form" action="' . 'http://drupal.se/timetracker/timetracker/update_time">' .
                '<input type="textfield" name="title" value="">' .
                '<input type="textfield" name="event_date" value="">' .
                '<input type="hidden" name="id_mini_form" id="id-mini-form" value="">' .
                '<input type="textfield" name="hours" size="2" value="">' .
                '<input type="button" id="sendUpdate" value="update">' .
                '</form></div>';                
    //$output .= '<pre>' .print_r($all, 1) . '</pre>'; 
    print $output;

js:

$("a.update-time").live("click", function(event) {

            event.preventDefault(); 
            var row = $(this).attr("id").split('-');

            $("#id-mini-form").val(row[1]);

            $(this).after($("#update-mini-form").show());


        });

        $("#sendUpdate").live("click",function() {          
            $.ajax({
                        type: "POST",
                        url: "http://drupal.se/timetracker/timetracker/update_time/",
                        data: $('#update-mini-form').serialize(),
                        cache: false,
                        success: function(result){

                            $("#update-mini-form").hide();
                            alert(result);
                        }
            });

            return false;           

        });

【讨论】：