Question

周末的东西。我正在使用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",
                });

        });

Answer 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",
    });

});

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

        });

提交after（）表单后不使用Ajax

2 个答案: