Блог

Главная - Вопросы по программированию - Как сообщить Jquery не удалять все содержимое при использовании функции загрузки?

Как сообщить Jquery не удалять все содержимое при использовании функции загрузки?

#php #jquery

#php #jquery

Вопрос:

У меня есть функция jquery, загружающая php-файл, который будет выводить некоторые данные в div. Код:

 function add(){
    $("#div").load("add.php");
}

Теперь проблема в том, что мне нужно иметь возможность использовать функцию несколько раз без перезаписи моего содержимого #div . Итак, теперь каждый раз, когда я использую функцию, текст внутри div удаляется и вставляется новое содержимое.

Как я мог бы решить эту проблему?

Ответ №1:

Попробуйте это:

 function add () {
    $( div ).append( $( '<div>' ).load( 'add.php' ) );
}

где div — ссылка на ваш элемент DIV. (Вы, конечно, хотите иметь ссылку, вместо того, чтобы запрашивать DIV при каждом вызове add() .)

Обновить:

Итак, данные, возвращаемые с сервера, представляют собой '<li>...</li>' строку, что означает, что вы хотите добавить их непосредственно к элементу UL:

 $.get( 'addday.php', function ( data ) {
    $( ul ).append( data );
});

Комментарии:

1. Кстати, как мне удалить его снова? Просто используя $( div ).remove( $( ‘<div>’ ).load( ‘удалить. php’ ) ); похоже, не работает.

2. @phpheini Это $( div ).children( 'div' ).remove(); удаляет все DIV, которые находятся внутри вашего div элемента.

3. Теперь у меня действительно странная проблема. Я создал divs для каждого элемента li, чтобы иметь возможность удалять элементы li. Итак, теперь с помощью $(«#div»).remove( $( «#» id «»)… Я удаляю div. Это работает отлично. Теперь при добавлении нового элемента создается что-то вроде <div id=23><li> что-то</li></div> Я использую Jquery, чтобы иметь возможность перетаскивать <li> для их сортировки. Теперь, когда я беру <li> и помещаю его под <div id=23><li> что-то</li></div>, это помещает его ВНУТРЬ div. И поэтому, если я удалю div с идентификатором 23, второй <li> также будет удален.

4. @phpheini Ваша HTML-структура недопустима. У вас не может быть элементов LI в качестве дочерних элементов DIV. Элементы LI должны быть дочерними элементами элемента UL. Когда вы определяете недопустимую структуру HTML, браузеры изменяют эту структуру, чтобы сделать ее допустимой, отсюда и странное поведение, которое вы описали.

5. Итак, я даже не могу создать структуру типа <ul><div><li></li></div></ul>? <li> должно быть непосредственно после <ul>?

Ответ №2:

Если вы планируете использовать функцию для добавления содержимого в другое </div> , вы можете передать функции целевой объект вместо использования статического селектора, подобного этому:

 // Add Function //
function add($target){
    $target.load('add.php');
}

// Call Function and Pass jQuery Object of Target //
add($('#firstDiv'));
add($('#someOtherDiv'));

Если вы планируете использовать функцию для добавления в тот же div, вы можете изменить вышеупомянутую функцию следующим образом:

 function add($target){    
    $target.append($('<span>').load('add.php'));
}

Я надеюсь, это поможет!

Ответ №3:

с помощью $.ajax() вы можете получить ответ и добавить его в свой div:

 $.ajax({
    url:     'add.php',
    type:    'GET',
    success: function(response) {
                var html = $("#div").html();
                $("#div").html(html   response);
                // or jQuery(response).wrap('<p />').appendTo('#div');
    });

Ответ №4:

 $.get("add.php", function (data) {
    $("#div").append(data);
});

Ответ №5:

Вместо этого вы можете использовать .get() функцию с определенным обработчиком успеха:

 $.get('add.php', function(data) {
  $('#div').append(data);
});

Ответ №6:

Попробуйте:

 $.get('add.php', function(data) {
    $('#div').append(data);
});