在WordPress循环中使用Jquery .next

Question

I'm trying to create an overlay effect with jquery inside of a WordPress loop to present the content of custom post type when clicking on its title.

Here is the HTML:

    <button href="#" class="popup-button">
        <? the_title(); ?>
    </button>

    <div class="popup-content"> 
      <?php echo get_the_content(); ?>
    </div>

The popup-content is hidden in CSS. and here is the JS:

<script>
$(document).ready(function() {
    $(document).on('.popup-button', 'click', function(e) {
        $(this).next('.popup-content').dialog(); 
        return false;
        });
    });
</script> 

But it's not working! please help! Thanks!

Answer 1

Maybe the issue is that you need to tell the dialog to open:

$( ".selector" ).dialog( "open" );

http://api.jqueryui.com/dialog/#method-open

If not, make sure that you are including the jQuery UI library.