0

2 つのスライドを含むスライダーがあり、どちらも同じフォームを含んでいます。いずれかのフォームから送信するときに、そのフォームのデータをフォームを含むスライドに追加したいと考えています。1 つのフォームからしかデータを取得できませんが、追加を 1 つのスライドだけで機能させることはできません。それは常に両方に追加されます。ajax を使用して、前方または後方のスライド ナビゲーションに基づいて非表示のスライドを変更し、スライダーが理論的に無限であるため、異なる ID を使用することはできません。

これが私のhtmlです（見やすいように簡略化されています）：

<div class="flexslider">
        <ul class="slides">

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

            <li>
                <ul class="table">
                    <li>
                        <div class="clearfix">
                            <span class="nameSpan">Customer One</span>
                        </div>
                    </li>
                </ul>
                <form class="addNewCustomerForm" method="post">
                    <h1>Add New Customer</h1>
                    <input type="text" name="customerName" id="customerName">   
                    <input class="button" type="submit" value="Add New Customer">
                </form>
            </li>

        </ul>
    </div>

そして、ここに私のjavascriptがあります（これも簡略化されています）：

$(".addNewCustomerForm").submit(function(event) {
        $.post('addNewCustomer.asp', $(this).serialize(), function(result){
            $(".table", this).append(result);
            $(".newLine").slideDown();
        })
        return false;
    });
4

2 に答える 2

0

これは、両方のスライド$(".table", this)に一致するためです。

これを解決するには、各スライドに次idのように指定します。id="slide1"

次に、$("#slide1")提出されたものに応じて (またはスライド 2) を実行します。

各スライドには独自のフォームがあるため、基本的にフォームをスライドにバインドする必要があります。

同様に、 についても同様のことを行う必要があるかもしれません$(".addNewCustomerForm")。各フォームに一意の ID を与え、一方の送信ハンドラーを にバインドし#slide1、もう一方を にバインドします。#slide2

于 2013-06-13T23:56:14.740 に答える
0

あなたはおそらくこのようなものが欲しい

$(".addNewCustomerForm").submit(function(event) {
    var thisForm = $(this);
    $.post('addNewCustomer.asp', $(this).serialize(), function(result){
        thisForm.parent().find('.table').append(result);
        $(".newLine").slideDown();
    })
    return false;
});

（ローカルでテストし、最初に変更して見つけました）

于 2013-06-13T23:58:36.200 に答える