Ajax Calls twice after first time calling MVC.NET

Question

I have a hidden form which does pagination, this is index file code:

<div id="content" class="ta20">
    <div class="inner" style="min-height: 700px;">
        <div class="row" style="margin-top: 25px;">
            <ol class="breadcrumb ta20AdminBC">
                <li><a href="@Url.Action("Dashboard", "Account", new { Area = "Admin" })">پنل مدیریت</a></li>
                <li class="active">برچسب ها</li>
            </ol>
        </div>
        <div class="row">

        </div>
        @Html.Partial("_PartialList", Model)
        <hr />
    </div>
</div>
@section scripts{
    @Scripts.Render("~/bundles/jqueryajax")
    <script>
        $(document).ready(function () {
            makeLisClickable();
        });
        function makeLisClickable() {
            $(".clickEnabledPaginationLi").each(function () {
                $(this).unbind("click");
                $(this).click(function (e) {
                    liClick($(this), e);
                });
            });            
        }
        function liClick(selector, e) {
            e.preventDefault();
            var form = $("form");
            var searchKey = selector.data("key");
            var searchPage = selector.data("page");
            $("#searchKey").val(searchKey);
            $("#pageNum").val(searchPage);
            form.submit();
            $(this).blur();
            return false;
        }
    </script>
}

Here is _PartialList code:

<div class="row" id="dataGrid">
    <div class="col-md-12 table-responsive">
        <table class="table table-striped">
            <tr>
                <th>
                    نام برچسب
                </th>
                <th>
                    تعداد زیربرچسب ها
                </th>
            </tr>

            @foreach (var item in Model.List)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SubTags.Count)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                    </td>
                </tr>
            }

        </table>
    </div>
    @Html.Partial("_PartialPager", Model.PagingInfo)
</div>
@using (Ajax.BeginForm(Model.PagingInfo.Action, Model.PagingInfo.Controller, new AjaxOptions
{
    HttpMethod = "POST",
    LoadingElementDuration = 100,
    LoadingElementId = "loading",
    UpdateTargetId = "dataGrid",
    OnSuccess = "makeLisClickable"
}))
{
    @Html.AntiForgeryToken()
    <input type="hidden" id="searchKey" name="key" />
    <input type="hidden" id="pageNum" name="page" />
}

as you see I have unbind previous click events of the elements, but after first time ajax execution, when I click on class which I have selected in jquery it executes the function twice for all of the selected class elements

Answer 1

Ok I Solved it myself, I defined the from in parent page and omit that from the partial views.