Динамически добавляемый HTML не удаляется динамически с помощью JQuery в Cakephp - PullRequest
Новая
       17

Динамически добавляемый HTML не удаляется динамически с помощью JQuery в Cakephp

0 голосов
/ 28 октября 2009

У нас есть список деталей на странице просмотра "garagecar / view / index.ctp". Список деталей заполняется PHP при первой загрузке страницы. Каждая часть имеет кнопку удаления. Когда пользователь нажимает «удалить», ссылка контроллера удаляет деталь, в то время как JQuery / Ajax удаляет HTML, который отображает деталь в индексе: 

$html->link(__('remove', true),
            array('controller'=>'garage_parts',
                  'action'=>'delete',
                  $gpart['GaragePart']['id']),
            array('class'=>'js-ajax remove_part'));
$(".remove_part").click(function(){
    var answer = confirm("Remove this part?");
    if (answer){
        var partdiv = $(this).parent().parent();
        $.ajax({
            type: "post",
            url: this.href,
        });
        $(partdiv).remove();
    }
    return false;
});

Когда пользователь хочет динамически добавить новую деталь, мы используем функцию JQuery $ (). Load для загрузки «garagepart / view / addpart.ctp». В addpart.ctp есть функция $ (). Ajax, которая добавляет деталь через JSON и добавляет HTML-код новой детали в список деталей в index.ctp.

Однако, если вы нажмете кнопку удаления в этой новой части, вышеупомянутая функция JQuery не оценивает. Функция не может удалить HTML, даже если она структурирована точно так же, как части, предварительно загруженные с помощью PHP. Ссылка на удаление Cakephp по-прежнему работает, поэтому эта часть исчезнет, ​​если вы перезагрузите страницу.

Почему JQuery не динамически удаляет часть, которая динамически добавляется? Удаление работает только для частей, которые были предварительно загружены с помощью PHP, а не для новых, которые добавляются через JQuery / Ajax. Пожалуйста, дайте мне знать, если вам нужно, чтобы я отправил больше кода ... спасибо!

Ответы [ 3 ]

0 голосов
/ 06 ноября 2009

Что я обычно делаю:

  1. Создать функцию, которая связывает событие с элементами (bind_remove())
  2. Сразу после вызова ajax, который создает вызов нового контента bind_remove(), который должен заставить работать новые элементы (т.е. в обратном вызове).
  3. Добавьте функцию bind_remove () в jQuery(document).ready(function() {});, которая должна заставить элементы загружаться с начала работы.

Вот как выглядит моя bind_remove () для страницы: 

function bind_remove() {
/* bind remove function */
    $('img[class="examremover"]').bind('click', function () {
        var id = $(this).attr('rel');
        $('#exrow'+id).remove();
        var examenes = $('#ReferenciaExamenes').val();
        examenes = examenes.replace(id, '');
        $('#ReferenciaExamenes').val(examenes);

        $('#referencia'+id).remove();
        return false;
    });

}

Я делаю это как для добавления, так и для удаления (разделенных функций), и это прекрасно работает.

0 голосов
/ 02 февраля 2010

То, что вы можете использовать, это плагин livequery от jQuery, который вы можете получить здесь: http://docs.jquery.com/Plugins/livequery и измените следующую строку в вашем коде:

FROM: 

$(".remove_part").click(function() {

TO: 

$(".remove_part").livequery('click', function() {

Это позволит отслеживать динамически добавленные элементы формы и автоматически привязывать клик даже к нему. Надеюсь, это поможет!

0 голосов
/ 28 октября 2009

Ваша проблема может быть решена с помощью функции live () в jQuery, которая в основном работает как click (), но «слушает» изменения в разметке и применяется к новым элементам, которые добавляются до того, как ajax вызовет нужные функции.

http://docs.jquery.com/Events/live

...