2010-08-15 2 views
2

После вызова сервера и перевода данных он возвращается в таблицу. Я вставляю его в страницу с помощью синтаксиса jQuery .html(). После этого данные появляются на странице, но я не могу манипулировать им с помощью jQuery.Невозможно манипулировать данными, вставленными из запроса ajax в jQuery

Heres код:

<html> 
<head> 
    <title>testJavaScript</title> 

    <script type="text/javascript" src="jquery-1.4.2.js"></script> 

    <script type="text/javascript"> 

    function makeTable(data) { 

     var htmlOut = "<table id=\"AjaxTable\">"; 

     for (x in data) { 
      htmlOut += "<tr>"; 
      for (y in data[x]) { 
       htmlOut += "<td>"+data[x][y]+"</td>"; 
      } 
      htmlOut += "</tr>"; 
     } 

     htmlOut += "</table>"; 

     return htmlOut; 
    } 

    function getValue() { 
     return $("#MyText").val() 
    } 

    $(document).ready(function() { 

     $("img").hover(function() { //This dosent work on the data returned from the server 
      $(this).hide(1000) 
      //$(this).css({'background-color': '#357EC7', 'border': '2px solid #2B60DE'}); 
     }) 

     $("#populateDrop").click(function() { 
      $.getJSON('http://127.0.0.1:5000/ajaxTest/json?num='+ getValue() +'&callback=?', function(data) { 
       $(".result").html(makeTable(data.data)); 
      }) 

     }) 
    }) 
    </script> 
</head> 

<body> 
    <img src="http://www.sharejs.com/code/windows/light-window/gallery/1-nature.jpg" width="50" height="50" /></br> 
    <form> 
    <input id="MyText" type="text" value="15" /> 
    </form> 
    <a href="#" id="populateDrop">Populate!</a></br> 
    <div class="result"></div> 
</body> 

ответ

0

Вы должны использовать live вместо этого для динамических данных:

$("img").live('hover', function() { 
$(this).hide(1000); 
}); 

Дополнительная информация:

+0

Прохладный, спасибо за быстрый ответ! – Joshkunz

+0

@Joshkunz: Добро пожаловать :) – Sarfraz

Смежные вопросы