0

So I have a bit of a unique question.

I am writing out a page that uses jQuery to fetch the return of a PHP script. Standard stuff there, and everything is working on the PHP side. The reason for my post is kind of unique, or it may not be.

So the PHP page includes a button with the ID “slider-close”. It shows up just fine, but when I try to use the jQuery to select it, nothing happens (as you would imagine, it’s supposed to close a slider panel/menu). Here’s my button:

<p><button id="close-slider" type="button" role="button" class="btn btn-danger">Close</button></p>

Here’s my jQuery:

            $("#close-slider").click(function(){
                $("#slider-panel").slideToggle();
            });

Now, when I put the button directly into the page and do not make the PHP page display it, the jQuery works as expected.

I am sure that I have done a terrible job of explaining it, and please feel free to ask any clarifying questions that need to be asked.

(Edit: I’ll post some more robust examples of what doesn’t work below)

WORKS

HTML

<div id=“slider-panel”>
  <div id=“output-div”>
  </div>
  <p><button id="close-slider" type="button" role="button" class="btn btn-danger">Close</button></p>
</div>

PHP

echo ‘Foo’;

Doesn’t work

HTML

<div id=“slider-panel”>
  <div id=“output-div”></div>
</div>

PHP

echo ‘Foo’;
echo ‘ <p><button id="close-slider" type="button" role="button" class="btn btn-danger">Close</button></p>’

“Foo” and the button will echo in both cases, but the “Close” button only closes the slider if coded into the page itself.

Javascript is placed at the bottom of the page in all cases.

This is placed at the bottom of the block, just before the closing tag (did this in case it was an ordering issue)

            $("#close-slider").click(function(){
                $("#slider-panel").slideToggle();
            });
Redbeard
  • 23
  • 4
  • Impossible to say exactly without a MCVE, other than the fact that the element doesn't appear to exist in the DOM at the time you run the script – CertainPerformance Jun 02 '22 at 01:40
  • Thank you for your response. I had read another answer on here that only popped up once I had posted. I reordered the placement of my selector to the bottom of the code block (added in recent edit). Admittedly I suck at posting questions here because I’m a fully self-taught cowboy coder that is awful at explaining things but I just know what works. I could try to throw together an MCVE here in a few. – Redbeard Jun 02 '22 at 01:54

0 Answers0