动态生成表单并使用.live()时如何获取表单输入的属性

Question

我正在从使用 getJSON 获取的 JSON 对象动态创建表单。如果有更好的方式以这种方式构建表单，请告诉我。我用这个例子来了解如何重新绑定提交按钮： 在 jQuery ajax 响应后重新绑定动态创建的表单**

我要做什么需要知道的是如何获取我单击的输入提交按钮的类。有一个“批准”和“拒绝”按钮，根据单击的按钮将在 POST 中发送到服务器，因此我知道如何处理在服务器端 POST 的表单数据。

这是代码：

<script type="text/javascript">
$().ready(function(){
    jQuery("form[id^='message-']").live('submit', function(){

        var id = parseInt(this.id.replace("message-", ""));

        // this is not the value of the class attribute from submit button clicked.      
        var action = this.attr('class');
        alert(action);

        return false;

        jQuery.ajax({
            type: "POST",
            url: "/path/to/ajaxhandler.php",
            data: {"action": action, "id": id},
            success: function(response) {                
        }           
    });

    /*
        generate form
    */
    $.fn.getAllUnapprovedMessages = function () {
        $.getJSON("/messages.php?a=getAllUnapproved, function(data){
            var i=0;
            $("div#messages").empty();

            while(i<data.length) {
                $('div#messages').append(
                    '<div id="msg-'+data[i].id+'" style="border: 1px coral solid; margin: 5px 5px 5px 5px;">'+
                    '<form id="message-'+data[i].id+'" name="form-'+data[i].id+'" action="/path/to/ajaxhandler.php" >'+
                    'From: '+data[i].u_from+' ----> To: '+data[i].u_to+'<br />'+
                    'Subject: <br /><input name="subject" type="text" value="'+data[i].subject+'" /> <br /><br />'+
                    'Message: <br /><textarea rows="10" cols="60">'+data[i].text+'</textarea><br />'+
                    '<input class="formApprove" type="submit" id="approve-'+data[i].id+'" value="Approve" /> or '+
                    '<input class="formDeny" type="submit" id="deny-'+data[i].id+'" value="Deny" />'+
                    '</form></div>');
                i++;
            }
        });
    }
}
</script>

这是我需要更改才能正确的内容：

// this is not the value of the class attribute from submit button clicked.      
var action = this.attr('class');
alert(action);

这样我就可以从单击的按钮获取类属性。

更新（2010 年 8 月 27 日）- 这是我为任何偶然发现此问题并需要答案的人所做的事情：

对于 serializeObject() 函数，请参阅这篇文章： 使用 jQuery 将表单数据转换为 JavaScript 对象

$(".formApprove").live('click', function() {
    var fid = this.id.replace(/approve-/i, "");
    var formObject = $('form#message-'+fid).serializeObject();

    $.post('/path/to/ajaxhandler.php', {
        a: 'setApproved',
        id: fid,
        subject: formObject.subject,
        message: formObject.message
    }, function(res) {
        if(res.result == 0) {
            alert ('done');
        } else {
            alert ('Error');
    },"json");
    return false;
});

Answer 1

简短的回答是，你不能。您无法仅从表单的提交事件获取对导致表单提交的元素的引用。您还需要将处理程序连接到按钮的单击事件。如果您为输入标签指定 name 属性，则在正常的完整发布过程中，它们的值将与其余表单值一起发送到服务器，但当您想通过 Ajax 执行此操作时，这并没有多大帮助。

我建议您修改代码来处理按钮的单击事件，并在该处理程序中收获类/值属性，然后触发表单的提交事件并将属性值作为自定义事件数据传递，然后您可以从表单提交处理程序。如果传递的数据为空/未定义。