0

解決済み-以下の私の答えを参照してください

リストを表示したいページがありますparentCategories。ユーザーが表示（またはサブカテゴリ）parentCategoryのリストを選択したとき。categories次に、ユーザーがをクリックしてcategoryリストをproducts表示できるようにします。

ここで説明した内容を使用してcategory、products機能を独自のページで機能させるようにしました。

parentCategoriesクリック可能なリストを作成して、リストcategories（またはサブカテゴリ）を表示することもできます。

productsリストが表示された後にリストを表示しようとすると、問題が発生categoriesします。

次のコードを使用しようとしています。

<script type="text/javascript">
    $(document).ready(function () {

        function getCategories(e) {
            e.preventDefault();
            e.stopPropagation();
            var $parentCategory = $(this).closest(".parentCategory");
            var parentCategoryName = $parentCategory.attr("id");
            $('.divResult', $parentCategory).load("@Url.Action("CategoryList", "Product")", {
                parentCategory: parentCategoryName
            });
        }

        $(".parentCategory").on("click", "a", getCategories);

        function getProducts(f) {
            f.preventDefault();
            f.stopPropagation();
            var $category = $(this).closest(".category");
            var categoryName = $category.attr("id");
            $('.divResult', $category).load("@Url.Action("ProductList", "Product")", {
                category: categoryName
            });
        }

        $(".category").on("click", "a", getProducts);
    });
</script>

ほぼ同じように繰り返されることはわかっていますが、もう少しクリーンアップする前に、機能させるようにしています。私がそれが機能するはずだと思う方法は、ユーザーがparentCategoryリンクをクリックしたとき、それはのdivクラス内にあるparentCategoryので、関数が起動することgetCategoriesです。これにより、クラスのdivを含む親parentCategorydiv内にいくつかのdivがcategory作成されます。

$(function() {
    $(".category").on("click", "a", getProducts);
});

category関数のdiv内のリンクをクリックすると、起動するgetProductsはずですが、起動しません。代わりにgetCategories再び発砲します（トリガーDebug.Write()するアクション内の理由でわかります。getCategories

categoriesの下に表示された後parentCategories、私のページは次のような形になります。

<div class="parentCategory" id="1">
. . .
    <div class="result">
        <div class="category" id="1">
        . . . 
            <div class="result">
                *This is where Products would be listed
            </div>
        </div>
        <div class="category" id="2">
        . . .
            <div class="result">
                *This is where Products would be listed
            </div>
        </div>
    </div>
. . .
</div>
<div class="parentCategory" id="2">
. . .
    <div class="result">
    . . .
    </div>
</div>

categoryクラスdiv内のリンクをクリックすると、関数getProductsがアクティブになるのではなく、何をする必要がありgetCategoriesますか？

アップデート

categorydivの外側のdivでコードをテストしましたがparentCategory、すべてが期待どおりに機能します。category問題は間違いなく私のdivがdiv内にあるという事実にあるようですparentCategoryそして：

$(".parentCategory").on("click", "a", getCategories);

以下の使用を上書きするようです：

$(".category").on("click", "a", getProducts);

私はどうやら何かを再構築する必要があります-私はただ何がわからないのです。

4

2 に答える 2

0

あなたはこれを試すことができます：

$(document).ready(function () {

    function getCategories(e) {
        //........
    }

    function getProducts(f) {
        //........
    }

    $(".parentCategory").on("click", "a", function(e){ 
         //Checking whether "a" is outside of ".category" element
         if( $(this).closest(".category").length===0 ){
             getCategories.call(this,e);
         }else{
             getProducts.call(this,e);
         }
    });
});
于 2012-07-19T15:44:17.497 に答える
0

最も簡単な方法は、click（）関数を次のように変更することでした。

$(".parentCategory").on("click", "a", getCategories);

$(".category").on("click", "a", getProducts);

に：

$(document).on("click",".parentCategory", getCategories);

$(document).on("click", ".category", getProducts);
于 2012-07-19T17:26:42.637 に答える