JavaScript函数不适用于发布的html数据 - JavaScript function not work with posted html data

JavaScript function not work with posted html data

我有两个页面，一个叫index.html，其中包括所有css、jquery库和主java脚本。其他页面调用size.php，它将生成html数据，并在调用main ajax时发送到index.php页面。

index.php

<head> 
   <link href="css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
   <div class="select2-container ">
      <form >
      <select id="select" class="form-control">
       <optgroup label="English / Tamil"><option value="1">5x2 - Front Box - English</option>
          <option value="2">8x2 - Front Box - English</option>
          <option value="3">6x10 -  Strip English / Tamil</option>
          <option value="4">16x5 - English</option>
       </optgroup>
      </select>
      </form>
      <div id="preview">
      <div class="col-xs-1 col-md-1 padding-no"  ><img src="imgs/info-icon.png" id="download-tip" title="not set"/></div>
      </div>

      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>  
      <script>
     $(document).ready(function(){ 
     //select change
     $("#select").change(function(){
        var size  = $(this).select2('data').id; 
         $.ajax({
            url: 'sizes.php',
            type: 'POST',
            data: { size_id : size  },
            dataType: 'html',
            beforeSend: function() {
                $('#preview').html('<img src="css/loading.gif" />');
            },
            success: function(data, textStatus, xhr) {
                    $('#preview').html(data); 
            },
            error: function(xhr, textStatus, errorThrown) {
                $('#preview').html(textStatus);
            }
        });
        });
    $('#size-tip').tooltip({
            placement: "top", 
            container: 'body'
        });

    });
    </script>

size.php

 <?php
    require_once('include/db.php');
    $size_id= $_POST['size'];  
    ?>  
    <div class="col-xs-1 col-md-1 padding-no" >
       <img src="imgs/info-icon.png" id="size-tip" title="<?php echo $size_id;?>" />
    </div>

问题是，当我从选择框中选择时，ajex可以正常工作，但在响应html（#size tip）工具提示中不起作用。在size.php中，我已经加载了任何jquery库。

每次我在使用ajax-html-jquery时遇到这个问题需要您的帮助

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 </head>
   <body>
   <div class="select2-container ">
      <form >
      <select id="select" class="form-control">
       <optgroup label="English / Tamil"><option value="1">5x2 - Front Box - English</option>
          <option value="2">8x2 - Front Box - English</option>
          <option value="3">6x10 -  Strip English / Tamil</option>
          <option value="4">16x5 - English</option>
       </optgroup>
      </select>
      </form>
      <div id="preview">
      <div class="col-xs-1 col-md-1 padding-no"  ><img src="imgs/info-icon.png" id="download-tip" title="not set"/></div>
      </div>
 <script>
     $(document).ready(function(){ 
     //select change
     $("#select").change(function(){
        // alert('ddd');
        var size  = 100; 
         //alert(size);
         $.ajax({
            url: 'ajax/sizes.php',
            type: 'POST',
             dataType: 'html',
            beforeSend: function() {
                //$('#preview').html('<img src="css/loading.gif" />');
            },
            success: function(data, textStatus, xhr) {
                     alert(data);
                    $('#preview').html(data); 
            },
            error: function(xhr, textStatus, errorThrown) {
                $('#preview').html(textStatus);
            }
        });
        });
   // $('#size-tip').tooltip({
     //       placement: "top", 
      //      container: 'body'
      //  });

    });
    </script>