Why does clicking a link rendered by WP PHP with target="_blank" open in new tab and current tab?

0 Votes
    833 Views
Twitter LinkedIn Facebook Pinterest

So I know this kind of question has been asked in here, but mine appears to be different from others.

The code below shows that if there is a URL populate it and open it in a new tab, however, for some strange reason the link opens in a new tab (YAY!!) AND opens in the current tab (BOO!!). Why is it opening in both the new tab and the current tab?

I just checked in an incognito window and it happens there also so it doesn’t appear to be a cookie issue either.

<div class="box span4">
    <?php if( $url1 != '' && $img1 != '' ): ?>
        <a href="<?php echo esc_url( $url1 ); ?>" target="_blank" class="box-link">
            <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
        </a>
    <?php else: ?>
        <?php if( $img1 != '' ): ?>
            <a class="box-no-url">
                <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
            </a>
        <?php endif; ?>
    <?php endif; ?>
    <p><?php echo wp_kses( $text1, array( 'br' => array(), 'em' => array(), 'strong' => array() ) ); ?></p>
</div>

To see this code in action please visit http://www.tayloredhomeinspection.com/ and scroll down to the image with the InterNACHI seal in the middle gray box and click on it (or the text below it).

2

Answers


  1. David Taylor

    Here is the weave job I did that seems to have it working.

    jQuery(window).load(function(e) {
 if (jQuery(window).width() > 767) {
  setTimeout(function() {
   jQuery("#widget_boxes_container .box").css("height", 
jQuery("#widget_boxes_container").height() - 20)
  }, 500)
 }
 jQuery(".boxes .box").each(function() {
  var e = jQuery(this).children(".box-link").attr("href");
  var target = jQuery(this).children(".box-link").attr("target");
  if (target == "_blank") {
      jQuery(this).off("click");
  }
  jQuery(this).hover(function() {
   if (e && e != "") jQuery(this).css("cursor", "pointer")
  }, function() {
   jQuery(this).css("cursor", "default")
  });
  jQuery(this).click(function(event) {
      if (e && e != "") {
          if (target == "_blank") {
              window.open( e, "_blank");
          }
          else { 
              window.location = e;
          }
      }
    });
 jQuery(".carousel").carousel("cycle")
})

    It looks like I have to keep the target="_blank" in the .php file and this should work for any changes I make in the theme and I have the file saved in case of theme updates.

Please signup or login to answer this question.