使用ajax加载模板时未呈现脚本

Question

我有一个注册页面，其中有几个步骤。每一步都用ajax刷新页面内容，并使用自己的模板。在模板中，我有一些用于管理操作的 js 代码。不幸的是，在包含渲染的模板后，我注意到我的

主要template：

{% block js %}
{% endblock %}

{% block content %}
<div id="landing">
    <div id="landing-left" style="float:left">
        <div class="video" style="width:450px; background: #f8f8f8; height:335px">
            video here
        </div>
        <div class="faq">
            FAQ !
        </div>
    </div>
    <div id="landing-right" style="float:left; width:400px;">
        {{ html|safe }}
    </div>
</div>
{% endblock %}

第 2 步和第 3 步的模板

{% block js %}
<script>
    $(function (){       
        $('#twitter-form').submit(function(e){
            e.preventDefault();
            step2();
        });
        $('a .submit-step-2').click(function(e){
            e.preventDefault();
            step2();
        });

        function step2(){
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax({
                type: "POST",
                url: "{% url my_rte_landing %}",
                data: "twitter_id=" + twitter_id,
                dataType: "json",
                success: function(data){
                    div.html(data['html']);
                }
            });
            return false;
        };

    });

</script>
{% endblock %}

<h1>Step 2: connect to Twitter</h1>

<div class="connect-twitter" style="background:#f8f8f8">
    <img src="{{MEDIA_URL}}site/img/twitter.png" />
    <span>Please enter your twitter ID</span>

    <form action="." method="post" id="twitter-form">
        <input id="twitter_id" name="" type="text" value="" />
        <input class="submit-step-2" type="submit" value="Send"/>        
    </form>
        <a href="#" class="submit-step-2">Skip this step</a>
</div>

：

{% block js %}
<script>
    $(function (){
        $('a .submit-step-3').click(function(e){
            e.preventDefault();
            step2();
        });        
        function step3(){
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax({
                type: "POST",
                url: "{% url my_rte_landing %}",
                dataType: "json",
                success: function(data){
                    div.html(data['html']);
                }
            });
            return false;
        };
    });
</script>
{% endblock %}

<div class="connect-twitter" style="background:#f8f8f8">
    <div id="likes-list">
    </div>
    <a href="#" class="submit-step-3">Proceed</a>  
    </div>

最后是渲染内容的函数：

def my_rte_landing(request):
    step = request.session.get("step", request.REQUEST.get("step", 1))

    if request.method == "POST":
        #ajax
        if step == 3:
            twitt = request.POST.get('twitter_id', None)            
            request.session["step"] += 1
            user_id = get_user_id(request.user.id)
            html = render_step3(request, user_id=user_id)

        result = simplejson.dumps({ "html" : html,}, cls = LazyEncoder)
        return HttpResponse(result, mimetype='application/javascript') 

    else:
        if step == 1:
            request.session["step"] = 1
            html = render_step1(request)
            request.session["step"] += 1

            return render_to_response('socialauth/login_page.html',{'html': html,}, context_instance=RequestContext(request))            
        else:
            new_user = True
            new_user_id = get_user_id(request.user.id)
            new_user_url = get_user_url()

            html = render_step2(request, new_user_url=new_user_url, new_user_id=new_user_id, new_user=new_user)
            request.session["step"] = 3

            return render_to_response('socialauth/login_page.html', 
                                    {'html': html}, context_instance=RequestContext(request))

def render_step2(request, new_user_url="", new_user_id="", new_user=False):
    template_name = 'socialauth/step2.html'
    return render_to_string(template_name, RequestContext(request, 
        {'new_user': new_user,'new_user_url': new_user_url, 'new_user_id': new_user_id,},),)

def render_step3(request, user_id):
    template_name = 'socialauth/step3.html'
    return render_to_string(template_name, RequestContext(request, {'user_id': user_id}))

Answer 1

当我使用 Prototype 返回一些带有混合 javascript 的 html 时，我必须专门告诉 AJAX 调用来评估通过 evalScripts:true 选项返回的 javascript。希望这有帮助。

更新

看起来您正在使用 jQuery。查看 jQuery.getScript()

您也可以使用常规jQuery.ajax() 如果将 dataType 设置为 script