CODEWITHSUNDEEP
phpjavascriptjquery
Satch3000
Satch3000

Reputation: 49384

PHP Function using javascript / jquery hiding div

I have a php function:

function myfunc() {

//then I have a div...

echo '<div class="overlay">';
echo "<button onclick=\"$('.overlay').hide();\">Close</button>";
echo '</div>';

}

My problem is that when I click on the close button the div is not hiding.

What I'm I doing wrong here?

Upvotes: 1

Views: 760

Answers (4)

VijayS91
VijayS91

Reputation: 1531

Try this code:

function myfunc() {

//then I have a div...

echo '<div class="overlay"  id="overlay" >';
echo "<button onclick=\"hide()\">Close</button>";
echo '</div>';

}
//using the javascript code:
function hide()
{
    document.getElementById("overlay").style.display="none";

}

Upvotes: 2

Jaswinder Singh Narula
Jaswinder Singh Narula

Reputation: 11

try:

$('.overlay button').live('click',function(
    $('.overlay').css({'display': 'none'});
));

Upvotes: 0

goncaloGomes
goncaloGomes

Reputation: 163

try:

<button onclick="this.parentNode.style.display = 'none'; return false;">Close</button>

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

Avoid to hardcode javascript handlers and inline events inside the output of php code: do instead

echo '<div class="overlay">';
echo "<button>Close</button>";
echo '</div>';

and previously insert in your page this code that detects a click on your button using event delegation

<script>
  $(document).on('click', '.overlay button', function() {
      $(this).parent().hide()
  });
</script>

Upvotes: 5

Related Questions