ajax не обновляется html в javascript -динамически созданный div - PullRequest
0 голосов
/ 18 апреля 2020

(с использованием jQuery)

1) У меня есть нажатие javascript, которое создает форму с раскрывающимся списком и элементом div, например:

$('#closestDiv').on('click','.firstClick', function(event){

var pass = $(this).attr('data-pass');

var f = document.createElement("form");
    f.setAttribute('method',"post");
    f.setAttribute('id',"newForm");
    f.setAttribute('action',"SubmitForm.php");

    var d = document.createElement("select");   
        var op1 = new Option();
            op1.value = "1";
            op1.text = "1"; 
            op1.setAttribute('class', "secondClick");
            op1.setAttribute('data-pass', pass);        
        d.options.add(op1);

f.appendChild(d);

var div = document.createElement("div");
        div.setAttribute('id', "newDiv");
        div.innerHTML = 'REPLACE CONTENT';      

f.appendChild(div);

$("#closestDiv").append(f);

 }); // end on click

2) Затем я нажимаю на опции раскрывающегося меню, которые загружают Контент в указанный div через ajax.

$('#closestDiv').on('click', '.secondClick', function () {  
    $(this).prop('selected', true);
    var value = $(this).attr('value');
    var pass = $(this).attr('data-pass');

$.ajax({
          url: 'getContent.php',
          type: "get",
          data : {value: value, pass: pass},
        success: function(response){

         var result = JSON.parse(response);      

        $('#newDiv').html(result['newContent']);

        console.log(result['newContent']);      
        console.log($('#newDiv'));

            } // end success function
    }); // end ajax call

 }); // end on click

Консоль показывает, что передается корректный newContent, а в консоли элемент div показывает правильные html с newContent, но фактический div страницы по-прежнему показывает «REPLACE CONTENT» (ie не обновляется).

Я сделал это успешно, когда выпадающий список загружается со страницей, а не через javascript. Мне интересно, не понимаю ли я порядок, в котором DOM загружает вещи, и как заставить это работать. По какой-то причине я подумал, что если бы я построил раскрывающийся список в javascript (а не через ajax - что в значительной степени дает идентичный результат и который я бы предпочел, если бы исправление было таким же ...), оно сразу стало бы функциональным .

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

Любые указатели, наиболее ценимые. Спасибо!

1 Ответ

1 голос
/ 19 апреля 2020

Замените ниже на:

$('#newDiv').html(result['newContent']);

на:

$(document).find('#closestDiv #newDiv').html(result['newContent']); 

Когда DOM обновляется динамически, вам необходимо получить доступ к добавленным элементам относительно документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...