2014-11-05 141 views
-1

我有2個頁面,一個名爲index.html,其中包括所有CSS,jQuery庫和主javascripts。其他頁面調用size.php將生成html數據並在調用main ajax時發送到index.php頁面。JavaScript函數不能與張貼的html數據一起工作

的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.php我已經加載了任何jQuery庫。每次我買了,當我使用AJAX HTML jQuery的 這個問題需要你的幫助

+0

您可以在動態內容的情況下不綁定時間

。在工具提示功能中使用jquery「on」函數 – amit 2014-11-05 05:50:50

+0

添加工具提示函數jQuery響應,這可能會解決您的問題。 – 2014-11-05 05:51:40

+0

amit如何在這裏使用「on」功能? Rahul tooltip函數已經在bootstrap.js中,但是在joomla,wordpress和其他mvc框架中,它們是如何處理這個問題的? – 2014-11-05 06:00:48

回答

0
<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> 
+0

我簡單地只顯示工具提示,我只是在頂部添加一個庫和coomentd你的一些代碼請根據你的需要修改 – kki3908050 2014-11-05 06:11:38

+0

欲瞭解更多信息,請參閱http://jqueryui.com/tooltip/#default – kki3908050 2014-11-05 06:14:17

+0

謝謝你的答案,實際上,但我需要綁定動態內容工作與javacript。 – 2014-11-05 06:22:32

相關問題