title: Calling an html attr when html is echo'd
body: <p>I am creating a list through echoing html from my controller to an ajax function. so my javascript get this data through ajax and create li's ...  then i want to call an attribute from this created html  ... its not working. ... what am I doing wrong?</p>
  
  <p>JAVA SCRIPT</p>
  
  <p>//To create list</p>
  
  <pre><code>$.ajax({
               url:'ol_locations',  // ol_locations is a controller, see below.
               dataType: 'html',
  
                  success: function (data3){
  
              //  list elements in the ordered list
  
  
              $('ol.locations_list').html(data3);
                  }});
  //list populated successfully
  </code></pre>
  
  <p>Controller ol_location ............</p>
  
  <p>public function ol_locations(){</p>
  
  <pre><code>    $this-&gt;load-&gt;model('model_location');
      $data = $this -&gt;model_location -&gt; fetch_location_data();
      $i=1;
      foreach ($data as $row){
  
  
  
          if ($row-&gt;Type == 'locality'){
  
              echo "&lt;div data-color ='red' id='".$i."'&gt;&lt;li&gt;&lt;a href ='#'&gt; &lt;span class='location_title'&gt;". $row -&gt; Nickname . " &lt;/span&gt; ". $row-&gt;FormattedAddress .
              "&lt;/a&gt; &lt;a class='remove_location' title='Remove this location' data-nid='{$row-&gt;Id}'
              style='float:right;'&gt;x&lt;/a&gt;" ." &lt;/li&gt; &lt;/div&gt;";
              $i++;
          }
          else {
                   echo "&lt;div data-color ='red' id='".$i."'&gt;&lt;li&gt; &lt;a href ='#'&gt;&lt;span class='location_title'&gt;". $row -&gt; Nickname. " ". $row -&gt; Radius ." km of &lt;/span&gt; ". " &lt;/span&gt; ". $row-&gt;FormattedAddress ."&lt;/a&gt;&lt;a class='remove_location' title='Remove this location' data-nid='{$row-&gt;Id}'style='float:right;'&gt;x&lt;/a&gt;" ." &lt;/li&gt; &lt;/div&gt;";
              $i++;
          } }
  }
  </code></pre>
  
  <hr>
  
  <p>now the HTML renders good ... but when i try to access any element in this "created html" nothing happens ... </p>
  
  <p>for example alert ($('#1'). attr('color')); will give "null" or undefined.</p>
  
  <p>I tried a lot of things like </p>
  
  <p>var initial_location = $('ol.locations_list li a'). attr('href');</p>
  
  <p>still null ...</p>
  
  <p>I m really stuck here ... </p>