Question

我尝试使用this jquery插件创建类似于facebook的网址预览。在我传递url的独立模板中，获取了url的预览，但是当我尝试将模板呈现为字符串时，jquery事件不会被触发。

这是我的模板

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="{% static "css/liveurl.css" %}" />
</head>
<body>

    <textarea style="width: 300px; height: 100px;" value="http://google.com" placeholder="write here"></textarea>
    <div class="liveurl-loader"></div>


        <script src="{% static "js/jquery.min-1.9.js" %}" > </script>
        <script src="{% static "js/jquery.liveurl.js" %}"> </script>
        <script> 

            var curImages = new Array();
            var response = new Object()
            var count = 0;

            $('textarea').liveUrl({
                loadStart : function(){
                    $('.liveurl-loader').show();
                },
                loadEnd : function(){
                    $('.liveurl-loader').hide();
                },
                success : function(data) 
                {
                    response['data'] = data
                    count = count + 1
                    var output = $('.liveurl');
                    output.find('.title').text(data.title);
                    output.find('.description').text(data.description);
                    output.find('.url').text(data.url);
                    output.find('.image').empty();

                    output.find('.close').one('click', function() 
                    {
                        var liveUrl     = $(this).parent();
                        liveUrl.hide('fast');
                        liveUrl.find('.video').html('').hide();
                        liveUrl.find('.image').html('');
                        liveUrl.find('.controls .prev').addClass('inactive');
                        liveUrl.find('.controls .next').addClass('inactive');
                        liveUrl.find('.thumbnail').hide();
                        liveUrl.find('.image').hide();

                        $('textarea').trigger('clear'); 
                        curImages = new Array();
                    });

                    output.show('fast');

                    if (data.video != null) {                       
                        var ratioW        = data.video.width  /350;
                        data.video.width  = 350;
                        data.video.height = data.video.height / ratioW;

                        var video = 
                        '<object width="' + data.video.width  + '" height="' + data.video.height  + '">' +
                            '<param name="movie"' +
                                  'value="' + data.video.file  + '"></param>' +
                            '<param name="allowScriptAccess" value="always"></param>' +
                            '<embed src="' + data.video.file  + '"' +
                                  'type="application/x-shockwave-flash"' +
                                  'allowscriptaccess="always"' +
                                  'width="' + data.video.width  + '" height="' + data.video.height  + '"></embed>' +
                        '</object>';
                        output.find('.video').html(video).show();
                    }
                    if (count == 2){
                        document.body.innerHTML = JSON.stringify(response);
                    }
                },
                addImage : function(image)
                {   
                    var output  = $('.liveurl');
                    var jqImage = $(image);
                    jqImage.attr('alt', 'Preview');

                    if ((image.width / image.height)  > 7 
                    ||  (image.height / image.width)  > 4 ) {
                        // we dont want extra large images...
                        return false;
                    } 

                    curImages.push(jqImage.attr('src'));
                    output.find('.image').append(jqImage);


                    if (curImages.length == 1) {
                        // first image...

                        output.find('.thumbnail .current').text('1');
                        output.find('.thumbnail').show();
                        output.find('.image').show();
                        jqImage.addClass('active');

                    }

                    if (curImages.length == 2) {
                        output.find('.controls .next').removeClass('inactive');
                    }

                    output.find('.thumbnail .max').text(curImages.length);
                    response['image'] = jqImage.attr('src')
                    count = count + 1
                    if (count == 2){
                        document.body.innerHTML = JSON.stringify(response);
                    }
                }
            });

            $("textarea").val("{{url}}");
            $("textarea").keyup();


            $('.liveurl ').on('click', '.controls .button', function() 
            {
                var self        = $(this);
                var liveUrl     = $(this).parents('.liveurl');
                var content     = liveUrl.find('.image');
                var images      = $('img', content);
                var activeImage = $('img.active', content);

                if (self.hasClass('next')) 
                     var elem = activeImage.next("img");
                else var elem = activeImage.prev("img");

                if (elem.length > 0) {
                    activeImage.removeClass('active');
                    elem.addClass('active');  
                    liveUrl.find('.thumbnail .current').text(elem.index() +1);

                    if (elem.index() +1 == images.length || elem.index()+1 == 1) {
                        self.addClass('inactive');
                    }
                }

                if (self.hasClass('next')) 
                     var other = elem.prev("img");
                else var other = elem.next("img");

                if (other.length > 0) {
                    if (self.hasClass('next')) 
                           self.prev().removeClass('inactive');
                    else   self.next().removeClass('inactive');
               } else {
                    if (self.hasClass('next')) 
                           self.prev().addClass('inactive');
                    else   self.next().addClass('inactive');
               }



            });
      </script>
   </body>
</html>

触发此jquery事件并正确呈现响应的正确方法是什么？有没有办法从python直接触发jquery事件？

Answer 1

您需要像在脚本标记中一样调用jQuery。所有Django都使用静态模板链接来链接到那些文件。

将您的javascript代码包装好，以便在文档就绪时调用。

$( document ).ready(function() {
  // Handler for .ready() called.
  // wrap the code that you want to be called here
});

Django渲染模板不加载jquery事件

1 个答案: