0

已解决- 请参阅下面的答案

我有一个要显示列表的页面parentCategories。当用户选择一个parentCategory列表时categories出现（或子类别）。然后，我希望用户能够单击 acategory并显示一个列表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会触发。这会在parentCategory包含类的 div 的父 div 中生成一些 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 之外的parentCategorydiv 测试了我的代码，一切都按预期工作。问题似乎完全在于我的categorydiv 位于parentCategorydiv 内，并且：

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

似乎覆盖了以下用途：

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

我显然需要重组一些东西——我只是不知道是什么。

4

2 回答 2

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 回答
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 回答