0

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

        });
4

2 回答 2

0

好的，我得到了这个工作。我建议使用单一形式，但 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;           

        });
于 2012-09-21T20:12:21.120 回答
0

如果我理解正确， .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",
    });

});
于 2012-09-21T15:32:41.963 回答