Django Rendervorlage lädt keine jquery Ereignisse

Ich versuche, eine URL-Vorschau ähnlich wie in Facebook zu erstellen, mit this jquery Plugin. In einer eigenständigen Vorlage, wenn ich URL überlasse, wird die Vorschau der URL abgerufen, aber wenn ich versuche, die Vorlage in eine Zeichenfolge zu rendern, wird das jquery-Ereignis nicht ausgelöst.Django Rendervorlage lädt keine jquery Ereignisse

Hier ist meine Vorlage

{% 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>

Was ist der richtige Weg, um dieses jquery Ereignis auszulösen und die Antwort richtig zu machen? Gibt es eine Möglichkeit, jquery-Ereignis direkt von Python auszulösen?

Quelle

2016-07-08 Kishore K

Sie müssen jQuery wie normalerweise innerhalb des Skript-Tags aufrufen. Alles, was Django mit der statischen Vorlagenverknüpfung macht, ist ein Link zu diesen Dateien.

Umhüllen Sie Javascript-Code auf Dokument bereit sein aufgerufen werden.

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

Quelle

2016-07-08 23:29:07

Ich habe das schon versucht, aber es funktioniert nicht –

Django Rendervorlage lädt keine jquery Ereignisse

Antwort

Verwandte Themen