Question

在ajax回调上，当表单在表格外时，在调用表单中选择一个div很有效，而在表格内部时则不起作用。任何使这项工作的方法？

请查看此JSFiddle：http://jsfiddle.net/split19/o0rs1L9z/7/

<form method="POST" action="#" class="fileform">
<tr>
    <td class="vert-align"><input type="text" name="name" id="name" /></td>
    <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
    <div class="feedback-icons">
        <span class="file-success">checkmark</span>
        <span class="file-error">x</span>
    </div>
    </td>
</tr>
</form>

<form method="POST" action="#" class="fileform">
<tr>
    <td class="vert-align"><input type="text" name="name" id="name" /></td>
    <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
    <div class="feedback-icons">
        <span class="file-success">checkmark</span>
        <span class="file-error">x</span>
    </div>
    </td>
</tr>
</form>

<h3>Table:</h3>

<table>
<form method="POST" action="#" class="fileform">
<tr>
    <td class="vert-align"><input type="text" name="name" id="name" /></td>
    <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
    <div class="feedback-icons">
        <span class="file-success">checkmark</span>
        <span class="file-error">x</span>
    </div>
    </td>
</tr>
</form>

<form method="POST" action="#" class="fileform">
<tr>
    <td class="vert-align"><input type="text" name="name" id="name" /></td>
    <td class="vert-align"><button class="btn btn-primary btn-xs" type="submit">Update</button>
    <div class="feedback-icons">
        <span class="file-success">checkmark</span>
        <span class="file-error">x</span>
    </div>
    </td>
</tr>
</form>

</table>

JS：

$(".fileform").submit(function(e)
{
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    var self = $(this);
    $.ajax(
    {
        url : formURL,
        type: "POST",
        data : postData,
        context: e.target,
        success:function(data, textStatus, jqXHR) 
        {
           self.find('.file-success').fadeIn(500);
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {    
          self.find('.file-error').fadeIn(500);
        }
    });
    e.preventDefault();
});

Answer 1

感谢您的评论。

我需要将表单放在td中并在表单中嵌套一个表。

http://jsfiddle.net/split19/u3xsa9mr/1/

<table>
    <tr>
        <td class="vert-align">
            <form method="POST" action="#" class="fileform">
                <table>
                    <tr>
                        <td class="vert-align">
                            <input type="text" name="name" id="name" />
                        </td>
                        <td class="vert-align">
                            <button class="btn btn-primary btn-xs" type="submit">Update</button>
                            <div class="feedback-icons">
                                <span class="file-success">checkmark</span>
                                <span class="file-error">x</span>               
                            </div> 
                        </td>
                    </tr>
                </table>                 
            </form>
        </td>
    </tr>
</table>

jquery在表格中选择div

1 个答案: