Making a <div> Clickable in Wordpress

Question

I'm working on modifying an existing wordpress portfolio page. All that is left to do is to make it so when the user clicks anywhere in the article list the link will open. Currently it is just when the title or image is clicked.

I can see that I could make a clickable with the following setup:

    <a href="http://example.com">
     <div>
     anything
     </div>
    </a>

However Wordpress moves the tags when the page loads like so:

<a href="http://example.com">
</a>
<div>
 anything
</div>

So I started to work on using css with the following setup:

HTML

<div class= "box">
</div>

CSS

div.box {
    position: relative;
}

div.box:hover {
    cursor: hand;
    cursor: pointer;
    opacity: .9;
}

The hover works, it triggers over all of the content and a cursor does appear.

However thats as much as I can do so far. Any attempt to interact with the .box is shot down. Nothing will trigger with javascript using the following :

$(".box").click(function() {
   alert("I am an alert box!"); 
});

I cannot seem to interact with the div.

The page is as follows:

<div class= "box">

<article id="post-<?php the_ID(); ?>" class="portfolio-article clearfix">

    <?php if( get_post_meta($post->ID, "portfolio_image", true) ): ?> 
        <a href="<?php the_field('portfolio_link'); ?>" target="_blank"><img src="<?php the_field('portfolio_image'); ?>" class="portfolio-image"></a>
        <!--get PDF if not empty-->
        <?php else: ?>
        <img src="http://domain.com/wp-content/uploads/2014/02/placeholder.png" class="portfolio-image">
    <?php endif; ?>

    <div class="portfolio-content">
        <header>
            <?php  if( get_post_meta($post->ID, "portfolio_link", true) ): ?> 
                <h1 class="portfolio-title">
                    <a target="_blank" href="<?php the_field('portfolio_link'); ?>">
                        <?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
                    </a>
                </h1>
                <!--get PDF if not empty-->
            <?php else: ?>
                <h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
            <?php endif; ?>
        </header>

        <p class="portfolio-meta">
            <?php the_field('portfolio_publication_and_date'); ?> 
            &nbsp;
            <?php if( get_post_meta($post->ID, "portfolio_pdf_upload", true) ): ?> 
                <a href="<?php the_field('portfolio_pdf_upload'); ?>" target="_blank"><span class="sosa-icon">H</span> Open Pdf</a><!--get PDF if not empty-->
            <?php endif; ?>
        </p><!-- END ortfolio-meta -->
       </div><!--portfolio-content-->


</article>

</div>

Answer 1

NewToJS was in the right area when saying it could be a problem with the access to the jQuery library. In this case I had linked jQuery correctly, it was tested and working.

jQuery in Wordpress needs to be enqueued by adding the following into functions.php

wp_enqueue_script("jquery");

My fault was because I didn't change the '$' to 'jQuery' as this is necessary when working with Wordpress.

Here is the incorrect usage :

$(".box").click(function() {
   alert("I am an alert box!"); 
});

Here is the correct usage :

jQuery(".box").click(function() {
   alert("I am an alert box!"); 
});