如何为每次无线电点击调用一次ajax函数

Question

我做了一个自定义下拉菜单，给定输入类型的收音机一切正常，但问题是。当我检查收音机而不是子列表附加到相关的无线电div元素时，而不是当我再次检查相同的无线电时，同样的事情发生。我希望不会发生意味着再次停止为每个收音机调用ajax。

请记住，我有4个子类别

为每个无线电点击\检查调用一次ajax。

这是第一个下拉代码

               <div class="col-md-6 col-sm-6">
                    <div class="form-group">
                        <label for="religion">project Categary</label><br/>

                        <input type="button" class="form-control" id="relig" value="select Category">

                        <div id="religions" style="display:none;padding-left:17px">
                            <?php foreach($categories as $cat){ ?>
                                <div id="<?php echo $cat['code'] ?>">
                                    <label><input type="radio" class="religions1" name="religion" id="religion" value="<?php echo $cat['code'] ?>">&nbsp;&nbsp;&nbsp;<?php echo $cat['Description'] ?></label><br/>
                                </div>  
                            <?php } ?>
                        </div>
                    </div>
                </div>

通过此代码获取无线电的价值

        $('#relig').click(function(){
            $('#religions').slideToggle("fast");
        });

        $(document).on('change','.religions1',function() {
            maincat = $(".religions1:checked").val();
            changeCategoryList(maincat);
        });

Ajax调用函数

 function changeCategoryList(maincategory){
    $.ajax({
       url: '<?php echo site_url("trusts/getCategories"); ?>',
       type: 'POST',
       data: { maincategory:maincategory },
       dataType: 'json',
       success: function(data) {
        $.each(data, function(key, value) {
                var MoreTag='';
                MoreTag += '<div id="'+value.code+'" Style="padding-left:20px">';
                MoreTag += '<label ><input type="radio" class="religions1" name="religion" id="religion" value="'+value.code+'">&nbsp;&nbsp;'+value.Description+'</label><br/>';
                MoreTag += '</div>';
                $("#"+maincategory).append(MoreTag);
            });
        }
    });
}

Answer 1

你可以这样试试：

将div添加到现有div：

<div id="religions" style="display:none;padding-left:17px">
                            <?php foreach($categories as $cat){ ?>
                                <div id="<?php echo $cat['code'] ?>">
                                    <label><input type="radio" class="religions1" name="religion" id="religion" value="<?php echo $cat['code'] ?>">&nbsp;&nbsp;&nbsp;<?php echo $cat['Description'] ?></label><br/>
                                    <!-- Add follwoing div to your code-->
                                    <div class="child_details"></div> 
                                </div>  
                            <?php } ?>
                        </div>

然后在无线电更换事件发生时，您可以根据它调用ajax方法检查dov是否为emty

<script type="text/javascript">
     $('#relig').click(function(){
            $('#religions').slideToggle("fast");
        });

        $(document).on('change','.religions1',function() {
            maincat = $(".religions1:checked").val();
            child_details = "#"+maincat+" child_details";
            if ($(child_details).children().length == 0){ //check div is empty or not
                changeCategoryList(maincat);
            }

        });
</script>

修改

因此，如您所说，您拥有多级子类别，您可以使用数组跟踪ajax已调用哪个类别ID的记录。我们的想法是在jquery中使用一个数组来存储被点击的类别。例如：

<script type="text/javascript">
    traversed_ids = []; //globally decalre array outside function
     $('#relig').click(function(){
            $('#religions').slideToggle("fast");
        });

        $(document).on('change','.religions1',function() {
            maincat = $(".religions1:checked").val();
            if ($.inArray(maincat, traversed_ids) < 0) //check elment exist in array or not
            {
                //add element to array
                traversed_ids.push(maincat);
                //call ajax
                changeCategoryList(maincat);
            }

        });
</script>