将附加到HTML上的jQuery加载功能

Question

I am trying to make an AJAX call which will append html ie add additional html to what is already present between the tags. Here is what my load function looks like.

<script>
    $(document).ready(function(){
      $(".tid-select").change(function(){
        $(".tid-list").load("/saffron_main/test");
      });
    });
</script>

How would I modify this function in order to get it to append to the class .tid-list. Thanks in advance.

Answer 1

You have to get data via ajax and use $('.tid-list').append(data);

<script>
$(document).ready(function(){
  $(".tid-select").change(function(){
   $.get("/saffron_main/test",function(data){
    $('.tid-list').append(data);
   });
 });
});
</script>

You may also use $('.tid-list').prepend(data); to insert before the current HTML.

Answer 2

Or instead of replacing the html you can just load the data into a variable and then add it to the DOM.

Example:

$.ajax({
    url: '/saffron_main/test',
    success: function (data) {
        $('.tid-list').append(data);
    }
});

This way events that have been bound to the existing html will stay bound.

Answer 3

Just change the change handler

$(".tid-select").change(function(){
   $.get("/saffron_main/test", function(data){
      $(".tid-list").append(data);
   });
});

edit: yeah, the other guys are right that append makes more sense