Question

我有一个网页，其中我有一些嵌套的div元素，形成一个完整的集合，可以在用户点击加载button时动态加载。

当首页加载时，网页上有一些脚本可以改变上述div元素的样式。

当用户点击加载更多按钮时，进行ajax调用并在上面提到的＆＃39; div＆＃39;元素之后附加接收的html。

问题是只有原始html被附加到页面上，而不在其上运行脚本，结果是只有首次加载页面时出现的div才能通过脚本获得样式。

如何让脚本在动态加载的元素上运行？

django观点：

from django.shortcuts import render
from printools.models import Images
from django.template import loader
from django.http import HttpResponse
from django.shortcuts import render
# Create your views here.
def index(request):
    image_set = Images.objects.all()[:3]
    template = loader.get_template('printools/index.html')
    context = {
        'images':image_set,
    }
    return HttpResponse(template.render(context,request))

def ajaxImages(request):
    total_image = Images.objects.all().count()
    n = int(request.POST['nImages'])
    template = loader.get_template('printools/ajaxImages.html')
    data = Images.objects.all()[n:n + 3]
    context = {
        'images': data,
        'n_images':total_image,
    }
    return HttpResponse(template.render(context, request))

ajax电话：

        $('#js-single-more').on('click',function (event) {
        console.log('clicked');
        $.ajax({
           type: 'POST',
           url:'/ajaxImages/',
           dataType: 'html',
           data: {
               'nImages': $('div.cbp-item').length,
               'csrfmiddlewaretoken': csrf
           },
           success: function (data) {
               console.log(data);
               $('.cbp-wrapper').append(data);
           }
       });
    });

ajax html：

    {% for image in images %}
          <div class="cbp-item {% for category in image.category.all %} {{ category }} {% endfor %}" data-total-images="{{ n_images }}"> <a class="cbp-caption cbp-singlePage">
            <div class="cbp-caption-defaultWrap"> <img src="{{ image.image_file.url }}" alt=""> </div>
            <div class="cbp-caption-activeWrap">
              <div class="cbp-l-caption-alignCenter">
                <div class="cbp-l-caption-body">
                  <p>{{ image.image_name }}</p>
                </div>
              </div>
            </div>
            </a> </div>
            {% endfor %}

初始加载元素：

    <div class="cbp-item package video" style="width: 380px; left: 395px; top: 0px;">
    <div class="cbp-item-wrapper">
        <a class="cbp-caption cbp-singlePage">
            <div class="cbp-caption-defaultWrap"> <img src="/media/p2.jpg" alt=""> </div>
            <div class="cbp-caption-activeWrap">
                <div class="cbp-l-caption-alignCenter">
                    <div class="cbp-l-caption-body">
                        <p>img_2</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

注意在执行脚本后添加了style属性

ajax loaded element：

    <div class="cbp-item  poster  identity  video " data-total-images="9">
    <a class="cbp-caption cbp-singlePage">
        <div class="cbp-caption-defaultWrap"> <img src="/media/p4.jpg" alt=""> </div>
        <div class="cbp-caption-activeWrap">
            <div class="cbp-l-caption-alignCenter">
                <div class="cbp-l-caption-body">
                    <p>img_4</p>
                </div>
            </div>
        </div>
    </a> 
</div>

脚本没有在它上面运行。

Answer 1

尝试这个机会：

$('#js-single-more').on('click',function (event)

为此：

$('#element').on('click','#js-single-more',function (event)

其中＆＃34; #element＆＃34;是一个在DOM中加载的元素，并不是在整页加载后创建的（例如，类＆＃34; .cbp-item＆＃34;）。

脚本未在django中的ajax加载内容上运行

1 个答案: