jQuery函数仅在调试时有效

Question

jQuery代码。

$(document).ready(function() {
  console.log("ready");
  /*
   * Selectors function
   * Write the queries using .on()
  */
   $(document).on("click", ".categ", function() {
     console.log("#category-wrapper"+this.id);
       $("#books-wrapper"+this.id).html("");
       $("#chapters-wrapper").html("");
       $("#examples-wrapper").html("");
       $("#contributor").hide();
       ajax_loader(this);
       Dajaxice.website.books(function(data) {
           Dajax.process(data);
           ajax_loader("clear");
        }, {category_id: $(this).attr('id')});
    });

HTML代码

<nav id="mp-menu" class="mp-menu">
    <div class="mp-level">
    <img src="{% static 'website/images/scilab-app-logo.svg' %}" class="full-width padding-logo" />
    <h2 class="icon icon-world" >Categories</h2>
    <ul>
    <div id="category-wrapper">
    {% for cate in catg %}
        <li id="categories" class="icon icon-arrow-left">
            <a href ="#" id={{ cate.id }} class="categ"> {{ cate.category_name }} </a>
                <div id="books-wrapper{{ cate.id }}" class="catbook"></div>
        </li>
    {% endfor %}
    </div>
    </ul>
    </div>
</nav>

Click function is working when I'm debugging( books inside category loads when I click)

When I just normally open webpag, open navbar and click on category nothing happens.