Saya membuat konten html menggunakan data ajax. Ini kode saya:

$('.expand').click(function(){$(this).toggleClass('open')});


function Get_id(){
  $.ajax({
    url: "here is my url with api_key",
    datatype: "json",
    method: "GET", // Что бы воспользоваться POST методом, меняем данную строку на POST   
    success: displayJson
  });
}
Get_id();


function displayJson(jsonData){
    let result='';
    console.log(jsonData['applications']);
     for (let i in jsonData["applications"]) {
     let goods ='<ul class=goods-container>'
     for(let j in jsonData["applications"][i]["goods"]){
        goods +='<li class="good">'+jsonData["applications"][i]["goods"][j].name+'</li>';
     }
      let endtime = '';
      let o_num = '';
      endtime += '<p>'+jsonData["applications"][i]["planDeliveryPeriod"].endDate.slice(11, 16)+'</p>';

      goods += '</ul>';

      result += '<div class=order-container><p>'+jsonData["applications"][i]["customId"]+'</p>'+endtime+'<div class="expand"></div></div>';

      $(".output").html(result);
    }
    setTimeout(Get_id, 30000);
}

Jadi toggleclass tidak berfungsi di sini dengan , tetapi jika saya memiliki struktur html ini tanpa js, itu berfungsi. Jadi, apakah masalah saya dalam menghasilkan html di javascript?

0
Naur 28 Januari 2020, 10:36

2 jawaban

Jawaban Terbaik

Ubah baris pertama seperti ini:

$('body').on('click', '.expand', function() {
        $(this).toggleClass('open')}
});
2
Smit Vora 28 Januari 2020, 07:43

Dalam kode Anda, baris pertama yang Anda tulis akan mencari elemen yang cocok dengan .expand dan menambahkan pendengar acara ke dalamnya. Tetapi karena elemen belum ada saat pernyataan dijalankan, itu tidak akan menambahkan pendengar apa pun.

Anda juga harus menjalankan pernyataan setelah elemen ditambahkan atau menambahkan pendengar acara ke isi dan memeriksa apakah target cocok .expand.

Berikut ini contohnya:

$(".test").on("click", printMethod.bind("Direct Listener 1"));
$("body").on("click", ".test", printMethod.bind("Body Listener"));

var newButton = document.body.appendChild(document.createElement("button"));
newButton.className = "test", newButton.textContent = "2";

$(".test").on("click", printMethod.bind("Direct Listener 2"));

function printMethod() {
  console.log(String(this));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="test">1</button>
0
nick zoum 28 Januari 2020, 08:52