Question

我有一个OctoberCMS组件，该组件具有用于join -j1 tableN1 tableN2 | awk '{ print $1,$2,$3,$4,$7 }' | join - tableN3 | awk '{ print $1,$2,$3,$4,$5,$8 }' | ... | awk -v N=$N '{ print $1,$2,$3,($4+$5+...,$N+4)/N}的AJAX处理程序，但是当onSelectTag HTML元素用#posts部分进行更新（渲染）时，将引发以下错误：

TypeError：jQuery未定义

tagList.htm：

blogPosts/postList

onSelectTag（）AJAX处理程序：

{% for tag in tags %}
<button type="button" class="list-group-item" data-request="onSelectTag" data-request-data="tagId: {{ tag.id }}">{{ tag.name }}</button>
{% endfor %}

blogPosts / postList.htm：

public function onSelectTag()
{
    $this->page['posts'] = Post::all();

    // below is where the partial updates / renders
    return [
        '#posts' => $this->renderPartial('blogPosts/postList.htm')
    ];
}

我不认为引用或加载顺序是问题所在，因为我尝试将jQuery引用和[viewBag] == {% if posts is empty %} {% set posts = __SELF__.posts %} {% endif %} {% if not hideFeatured is defined %} {% set hideFeatured = __SELF__.property('hideFeatured') %} {% endif %} {% set pageSlug = post.slug %} {% if not hideFeatured %} <div class="row" id="highlight"> <div class="col-lg-8"> <div class="card" id="featured"> <a href="{{ posts.first.url }}"> {% if posts.first.featured_images.count %} <img src="{{ posts.first.featured_images[0].path }}" alt="{{ posts.first.title }}" class="card-img-top"> {% endif %} {% if posts.first.categories.count %} <p class="card-header"> {% for category in posts.first.categories %} <a href="{{ category.url }}" class="badge badge-secondary">{{ category.name }}</a> {% endfor %} </p> {% endif %} <div class="card-body bg-success text-white"> <h5 class="card-title"><a href="{{ posts.first.url }}" class="text-white">{{ posts.first.title | upper }}</a> <small class="float-right">{{ posts.first.published_at|date('F d, Y') }}</small></h5> <hr class="tagline"/> <p class="card-text">{{ posts.first.summary|striptags|length > 150 ? posts.first.summary|striptags|slice(0, 150) ~ '...' : posts.first.summary|striptags}}</p> </div> <div class="card-footer text-muted"> <span><i class="fas fa-tags" aria-hidden="true"></i> Tags: </span> {% if posts.first.tags.count %} {% for tag in posts.first.tags %} <span class="badge badge-primary">{{ tag.name }}</span> {% endfor %} {% else %} <span class="badge badge-danger">No Tags</span> {% endif %} </div> </a> </div> </div> <div class="col-lg-4"> <div class="embed-responsive embed-responsive-16by9"> {% partial 'youtube' %} </div> <br /> <div class="card"> <h4 class="card-header">SUBSCRIBE TO OUR NEWSLETTER</h4> <div class="card-body"> {% partial 'mail-chimp' %} </div> </div> </div> </div> {% endif %} <br /> <div class="card-columns"> {% for post in posts %} {% if loop.first and not hideFeatured %}  {% elseif post.slug != pageSlug %} <a href="{{ url('/blog/post/' ~ post.slug) }}"> <div class="card"> {% if post.featured_images.count %} <img src="{{ post.featured_images[0].path }}" class="card-img-top" alt="{{ post.title }}"> {% endif %} <div class="card-body"> <h4 class="card-title text-center"><a href="{{ post.url }}">{{ post.title | upper }}</a></h4> <p class="card-subtitle text-muted text-center">{{ post.published_at|date('F d, Y') }}</p> {% if post.categories.count %} {% for category in post.categories %} <a href="{{ url('/blog/category/' ~ category.slug) }}" class="badge badge-success">{{ category.name }}</a> {% endfor %} {% endif %} <hr class="tagline" /> <div class="card-text">{{ post.summary|striptags|length > 50 ? post.summary|striptags|slice(0, 50) ~ '...' : post.summary|striptags}}</div> </div> <div class="card-footer text-muted"> <span><i class="fas fa-tags" aria-hidden="true"></i> Tags: </span> {% if post.tags.count %} {% for tag in post.tags %} <span class="badge badge-primary">{{ tag.name }}</span> {% endfor %} {% else %} <span class="badge badge-danger">No Tags</span> {% endif %} </div> </div> </a> {% endif %} {% else %} <h3 class="no-data">{{ noPostsMessage }}</h3> {% endfor %} </div> <div class="row"> {% if posts.lastPage > 1 %} <ul class="pagination"> {% if posts.currentPage > 1 %} <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">← Prev</a></li> {% endif %} {% for page in 1..posts.lastPage %} <li class="{{ posts.currentPage == page ? 'active' : null }}"> <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a> </li> {% endfor %} {% if posts.lastPage > posts.currentPage %} <li><a href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">Next →</a></li> {% endif %} </ul> {% endif %} </div>  <div class="modal fade" id="subscribeModal" tabindex="-1" role="dialog" aria-labelledby="subscribeModalTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-md-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="subscribeModalTitle">SUBSCRIBE TO OUR NEWSLETTER</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> {% partial 'mail-chimp' %} </div> </div> </div> </div> <div class="accordion subscribe-footer" id="accordionExample"> <div class="card"> <div class="card-header text-center" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> SUBSCRIBE TO OUR NEWSLETTER <i class="fas fa-chevron-up subscribe-chevron" aria-hidden="true"></i> </button> </h5> </div> <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> {% partial 'mail-chimp' %} </div> </div> </div> </div> <div class="accordion subscribe-footer-mobile" id="accordionExample"> <div class="card"> <div class="card-header text-center" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> SUBSCRIBE <i class="fas fa-chevron-up subscribe-chevron" aria-hidden="true"></i> </button> </h5> </div> <div id="collapseOne" class="collapse hide" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> {% partial 'mail-chimp' %} </div> </div> </div> </div>引用以及{% framework extras %}引用移动到页面的许多不同部分，并且两种方式都没有改变。

我的理论：

我认为，当部分更新时，它搞砸了jQuery Framework调用之类的东西。很奇怪，因为jQuery函数仍然像这样工作：

{% scripts %}

这仍然有效，但是OctoberCMS AJAX框架定义的功能（例如$('#tagFilter').on('input', function() { console.log("TEST"); });）不起作用。我不确定为什么会这样。

Answer 1

我再次阅读了您的问题，发现您似乎包括了jquery库，但未显示布局代码。

我也遇到了这个问题。多深度ajax无效，并且破坏了使用整个dom的内容。可能与零件的生命周期有关。

一开始就把这个留给像我这样的傻瓜。

{{ framework extras }}实际上并未加载jquery库。这是Octobercms的默认模板代码。 Referenced here in the docs.

        <!-- Scripts -->
        <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
        <script src="{{ 'assets/vendor/bootstrap.js'|theme }}"></script>
        <script src="{{ 'assets/javascript/app.js'|theme }}"></script>
        {% framework extras %}
        {% scripts %}

我在布局的开头调用<script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>，该布局连接到某些jquery的最小化和压缩版本。

{% scripts %}也是处理插入脚本的方式。 Referenced here in the docs.

部分更新后出现“ TypeError：jQuery未定义”-OctoberCMS

tagList.htm：

onSelectTag（）AJAX处理程序：

blogPosts / postList.htm：

我的理论：

1 个答案: