Make a div clickable only when an anchor is present in a div (multiple divs)

Question

Given the basic structure, how can I turn a series of divs into links without turning each div into a link? Here is an example:

<div class="boxes">
  <div class="box"><p>Some text with a <a href="https://www.google.com">link</a></p></div>
  <div class="box"><p>Some text without a link</p></div>
  <div class="box"><p>Some text with a <a href="https://www.example.com">link</a></p></div>
  <div class="box"><p>Some text without a link</p></div>
</div>

And the related jQuery that I use to make divs interactive:

$(document).ready(function() {

  if($('.boxes p a').length){

    $(".boxes .box").click(function() {
      window.open($(this).find("a").attr("href")); 
      return false;
    });

  }

});

The problem I'm encountering is that the click function applies to all divs, not just links with links.

The desired behavior is only to create a fully interactive div only when an anchor element is detected.

For the purpose of this use, div ( .box) is dynamically generated and wrapping the element in the anchor ( <a href="#"><div> </div></a>) tag is not possible.

Fiddle: https://jsfiddle.net/fu8xLg0d/

Answer 1

.boxes .box, div.

- :

$(".boxes .box").has('a')...

, a

JSFiddle

Answer 2

.parent, :

$(document).ready(function() {

  if($('.boxes p a').length){

    $("a").parent().parent().click(function() {
      window.open($(this).find("a").attr("href")); 
      return false;
    });

  }

});

, , , , ...:)

Answer 3

Plotisateur !: P

if($('.boxes p a').length){
    $(".boxes .box").has('a').click(function() {
      window.open($(this).find("a").attr("href")); 
      return false;
});

: https://jsfiddle.net/fu8xLg0d/1/

Answer 4

 You can try this.

  $(document).ready(function() {
  var anchorbox =$(".boxes p a");
  if(anchorbox.length>0){
    $(anchorbox).parent().click(function() {
    window.open($(this).find("a").attr("href")); 
     return false;
    }); 
  }
 });

Answer 5

.

$(document).ready(function() {

if($('.boxes p a').length){

$(".boxes .box").click(function() {

if ($(this).children('p').children('a').length) {

    window.open($(this).find("a").attr("href")); 
return false;
}

});

}

});

,

if ($(this).children('p').children('a').length) {

    window.open($(this).find("a").attr("href")); 
return false;
}

Answer 6

div (.box) .

Delegate the click event from bodyin to the target div and on clickon the element check if it has an anchor tag. To add a pointer icon, create a separate function that will add an icon to a div only if it has an anchor tag as a child

$(document).ready(function() {
  // separate function to add pointer only if a is present
  addClassToElem();
  $("body").on('click', '.box', function() {
    if ($(this).find('a').length) {

      window.open($(this).find("a").attr("href"));
      return false;
    }

  })
});

function addClassToElem() {
  $('.box a').each(function(a, b) {
    $(this).parent().addClass('linkIcon')
  })

}

.linkIcon {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box">
    <p>Some text with a <a href="https://www.google.com">link</a></p>
  </div>
  <div class="box">
    <p>Some text without a link</p>
  </div>
  <div class="box">
    <p>Some text with a <a href="https://www.example.com">link</a></p>
  </div>
  <div class="box">
    <p>Some text without a link</p>
  </div>
</div>

Run code