jQuery Ajax PHP搜索栏只能运行一次

Question

I've build a small search engine for my websites blog articles, I'm submitting the form with Ajax and then returning the results and replacing the old content with the new search results the problem is that if I search once it works but if I search again it just displays the results from the first search. Any help would be great thanks in advance!

HTML

<form action="handlers/handler-search.php" class="align-right" method="post">
    <input type="text" name="term"  placeholder="Search app reviews...">
    <input type="submit" value="Go">
</form>

jQuery Ajax

    $('form').submit(function (event) {

    event.preventDefault();

    $(".content").fadeOut(750);

    $.ajax({
        type: "POST",
        url : $('form').attr('action'),
        dataType: "json",
        data: $("form").serialize()
    }).done(function(data) {

        var string = "";

        $.each(data, function(i,item) {

         string += "<section class='widget six'> \
         <a href='index.php?art_id="+item.art_id+"'> \
         <div class='content'> \
         <h1>"+item.art_title+"</h1> \
         </div> \
         </a> \
         </section>";

        });

        $('.results').replaceWith(string);
        $(".content").fadeIn(750);
    });

   return false;
});

PHP / SQL

if(isset($_POST['term'])) {

$statement_search = $db->prepare("SELECT * FROM app_articles WHERE art_title LIKE :term");

$statement_search->setFetchMode(PDO::FETCH_ASSOC);

$statement_search->execute(array(':term' => '%'.$_POST['term'].'%'));   

$data = $statement_search->fetchAll();

echo json_encode($data);
}

Answer 1

You are removing the results element, you should instead replace it's contents.

$('.results').html(string);