Как я могу скрыть элемент, загруженный через AJAX - PullRequest
Новая
       0

Как я могу скрыть элемент, загруженный через AJAX

2 голосов
/ 22 июля 2011

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

обновление: изначально эта же часть была уже скрыта при загрузке страницы.

Первоначально у меня есть что-то вроде этого: 

<a id="link" href="">a link</a>
   <ul class="list">
         <li>...</li>
         <li>...</li>
   </ul>

и jquery: 

$('.list').hide();
$('#link').moserover(function(){
      $('.list').show();
})

Теперь эта часть будет заменена другим контентом, полученным от ajax, который такой же, 

 <a id="link" href="">another link</a>
   <ul class="list">
         <li>****</li>
         <li>****</li>
   </ul>

но когда этот контент вставляется на страницу ,,, список не скрывается, мой вопрос заключается в том, как я могу скрыть этот список всякий раз, когда он приходит от ajax. надеюсь, это понятно.

Ответы [ 5 ]

3 голосов
/ 22 июля 2011

если вы используете jquery load , то вы можете выполнить все в функции обратного вызова

небольшой пример здесь 

$('#result').load('server.php', function() {

$(".list").hide();  

});

Редактировать

Если выне хочу писать код снова и снова, это хорошо.

Таким образом, вы можете объявить функцию и вызывать ее где угодно!как 

function foo(){

// your code
}

//call it on document load
foo();

 $('#result').load('server.php', function() {    
    foo();    
    });

, но в вашем случае это просто однострочный код. Если вы все еще хотите упростить его, это просто 

var myele =  $(".list");

myele.hide();
myele.show();

Надеюсь, это поможет

3 голосов
/ 22 июля 2011

Если вы хотите, чтобы он был скрыт по умолчанию при первой загрузке, используйте CSS в таблице стилей или добавьте встроенный стиль в разметку.Это сделает его условие по умолчанию скрытым.Если по какой-то причине вы не можете этого сделать, то сразу после загрузки через ajax вы можете скрыть это с помощью jQuery.

Если в вашем вопросе есть что-то еще, пожалуйста, уточните или объясните более подробночто вы хотите.

Предположим, что добавляемый вами контент выглядит следующим образом: 

<div id="myAjaxContent">My content here</div>

Тогда вы можете просто добавить CSS в свою таблицу стилей, как этот, и элемент автоматически будет скрыт без вас.необходимость делать что-либо еще (jQuery не требуется): 

#myAjaxContent {display: none;}

или вы можете использовать встроенный стиль для содержимого: 

<div id="myAjaxContent" style="display: none;">My content here</div>

Или, если вы хотите показать / скрыть егос кодом вы можете использовать это сразу после завершения вызова ajax (это ваш код, который загружает его через ajax, так что вы можете запустить любой код после загрузки): 

$("#myAjaxContent").hide();

.live() толькодля таких событий, как клики.Вы не можете использовать .live() для автоматического вызова hide() для любых новых элементов.Для этого вы должны использовать предопределенный CSS (либо в таблице стилей, либо в строке на объекте).

Если вы хотите, чтобы потом было легче переключать видимость, то поместите определенный объект в объект: 

<div id="myAjaxContent" class="notVisible" style="display: none;">My content here</div>

и имеют предопределенное правило таблицы стилей CSS, например: 

.notVisible {display: none;}

Позже, если вы хотите программно показать объект, вы можете просто сделать: 

$("#myAjaxContent").removeClass("notVisible");

и это покажет.

1 голос
/ 22 июля 2011

Хорошо, вы можете попытаться заставить AJAX вернуть строку HTML-кода для вставки.Убедитесь, что есть идентификатор или класс для каждого элемента, который вы хотите скрыть.Затем с помощью нескольких простых .apppend() или .html() звонков вы можете добавить весь этот код на свою страницу.

0 голосов
/ 22 июля 2011

Мой голос за переосмысление вашего текущего метода.

Вы делаете вызов AJAX и возвращаете целый блок HTML, который структурно аналогичен тому, что вы уже имели на странице, когда загружали его. Это кажется немного неэффективным и создает дополнительные накладные расходы (как вы видите).

Попробуйте вернуть значения li или a в JSON / XML, а затем использовать .text() для замены значений в HTML. Это будет полезно в нескольких отношениях; Вы уменьшаете размер своего ответа и выполняете то, что вам нужно.

0 голосов
/ 22 июля 2011

отображение: скрыто .. через css ..

$ ( "elementid. ") CSS (" дисплей", "скрытый");.

...