将 json 数据加载到展开的按钮中 - bootstrap 4 beta

Question

Hi I'm trying to format and plug in some data from a js document, formatted as javascript objects, into a div within a collapsed div , which expands when you click a button. I'm using leaflet and working with the exact same data, and I've had no problem plugging the json data into map popups. jquery append isn't working at all, even if I just try to append text nothing shows up. I've tried about 10 different solutions from a bunch of different questions, but still nothing will show up. I am using bootstrap 4 beta.

latest js attempt:

$(document).ready(function(){
    $('button').click(function(){

        $('#everydayFoodContent').append('<p>hello!</p>');
    });    
});

I've also tried just having

$('#everydayFoodContent').append('<p>hello!</p>');

on its own but that still doesn't work. I've also tried this:

$everydayFoodContent=$('#everydayFoodContent');
$everydayFoodContent.append('<p>hello!</p>');

I've also tried using " console.log('#everydayFoodContent'); " as I've seen other answers to similar questions suggest this to check and make sure the div is available(I think) but honestly I don't know what the purpose of console.log is or what I'm supposed to see if it does or doesn't work, and haven't been able to find anything online that concisely explains this. When I include it, nothing related to this div shows up in the console, if that's helpful.

here's the html:

<button class="btn btn-light" data-toggle="collapse" data-target="#everydaycollapse" aria-expanded="false" aria-controls="everydaycollapse">
  Everyday</button> 
<div class="collapse" id="everydaycollapse">
  <div class="card card-block" id="everydayContent">
      <div id="everdayFoodContent">Food</div><br><br>
      <div id="everdayDrinkContent">Drink</div>
  </div>
    </div>

Answer 1

It appears to be a simple spelling error. You spelled the ID of the div in question " everday FoodContent", and you're trying to append it with the id " everyday FoodContent" in the jQuery call. Note the 'y'.

Changing your append to this will resolve the issue:

 $('#everdayFoodContent').append('<p>hello!</p>');

Or, alternately, you can revise your div ID to have the correct spelling like so:

<div id="everydayFoodContent">Food</div><br><br>

Suppose you just need to decide on how you want to spell it! ;)

EDIT

I've attached the full code of both the working HTML and CSS, so perhaps it will be easier. Copy and paste these into your project. If it works, then there was some other syntax mistake in your code. If not, then you may be loading jQuery into your file incorrectly.

HTML

<button  class="btn btn-light" data-toggle="collapse" data-target="#everydaycollapse" aria-expanded="false" aria-controls="everydaycollapse">Everyday</button> 
<div class="collapse" id="everydaycollapse">
    <div class="card card-block" id="everydayContent">
        <div id="everydayFoodContent">Food</div><br><br>
        <div id="everdayDrinkContent">Drink</div>
    </div>
</div> 

jQuery

$(document).ready(function(){
    $('button').click(function(){
        console.log("button clicked");
        $('#everydayFoodContent').append('<p>hello!</p>');
    });    
})

I've verified that this code will successfully append the string whenever the button is clicked. It really should work in your browser. If not, it's probably going to be a missing dependency or something else on your environment.