Содержимое, добавленное функцией load(), исчезает после действия ajax

Question

Я создаю страницу сортировки, на которой будет отображаться содержимое базы данных, и пользователь может сортировать ее с помощью listjs. Проблема в том, что когда я нажимаю любую кнопку, содержимое, загруженное из базы данных, исчезает. Когда я заполняю контент вручную, он отлично работает. Может ли кто-нибудь помочь мне с этой проблемой?

Моя функция загрузки:

$(document).ready(function(){ 
    $(".list").load("../wp-content/php/sorting.php"); 
}); 

sorting.php

<?php 
mysql_connect("***", "***", "**") or die(mysql_error()); 
mysql_select_db("***"); 

$result = mysql_query("SELECT * FROM business"); 

while($row = mysql_fetch_array($result)) 
    { 
?><li class="onebusiness"><a href="<?php 
    echo $row['link'];?>"><img src="<?php 
    echo $row['img'];?>" height="125" width="125"/><p class="name"><?php 
    echo $row['name'];?></p><p class="category" style="display:none;"><?php 
    echo $row['category'];?></p></a></li><?php 
    } 
mysql_close(); 
?> 

HTML:

<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script> 
<script src="../wp-content/js/list/list-min.js" type="text/javascript"></script> 
<div id="busineseslist"> 
    <input class="search" placeholder="Search Business" /> 
    <ul class="sort-by"> 
     <li class="sort btn" data-sort="name">Sort by name</li> 
     <li class="sort btn" data-sort="category">Sort by category</li> 
    </ul> 
    <ul class="filter"> 
     <li class="btn" id="filter-none">Show all</li> 
     <li class="btn" id="filter-something">Only show something</li> 
     <li class="btn" id="filter-else">Only show something else</li> 
    </ul> 
    <div class="list"></div> 
</div> 

Answer 1

Почему вы не просто сделать это:

<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script> 
<script src="../wp-content/js/list/list-min.js" type="text/javascript"></script> 
<div id="busineseslist"> 
<input class="search" placeholder="Search Business" /> 
<ul class="sort-by"> 
    <li class="sort btn" data-sort="name">Sort by name</li> 
    <li class="sort btn" data-sort="category">Sort by category</li> 
</ul> 
<ul class="filter"> 
    <li class="btn" id="filter-none">Show all</li> 
    <li class="btn" id="filter-something">Only show something</li> 
    <li class="btn" id="filter-else">Only show something else</li> 
</ul> 
<div class="list"><?php include '../wp-content/php/sorting.php'; ?></div> 
</div> 

При этом вы можете удалить эту строку:

<script src="../wp-content/js/filter/call-php.js" type="text/javascript"></script>//delete this 

Что я думаю, его в JS с помощью следующего кода:

$(document).ready(function(){ 
$(".list").load("../wp-content/php/sorting.php"); 
}); 

Потому что с PHP включает вам не нужна функция нагрузки;)

------------------------ EDITED ----------------------- -----------------

В wordpress вы можете включить файлы таким образом:

Поместите включаемые файлы в папке темы и использовать это в footer.php вашей темы:

<?php include (TEMPLATEPATH . '/sorting.php'); ?> 

Смотрите эту ссылку ссылку: http://www.deluxeblogtips.com/2010/06/wordpress-include-template-files.html

Ваш DIV должен выглядит следующим образом:

Go в «Редактор тем» найдите файл, который генерирует html. Отредактируйте его и поместите этот код между тегами divs:

<div class="list"><?php include (TEMPLATEPATH . '/sorting.php'); ?></div> 

Saludos.