Question

I have 1 link surrounding another one like this:

<a href="#" class="video-link">
  <a href="#" class="not-video-link">link</a>
</a>

with jQuery i have found a function that can transform a table to iframe like this:

$(".video-link").live("click", function (e) {
    e.preventDefault();
    // Capture the link's HREF attribute in a variable. 
    var youtubeLink = $(this).attr('href');
    var youtubeDiv = $(this).attr('id');

    // Set the HTML (the content) of the "video destination div" 
    // to = your iframe, including the youtubeLink
    // that the user original saved into this node.

    $('#' + youtubeDiv + '').html('<iframe style="margin-left:-12px; margin-right:-12px;" frameborder="0" height="234" src="' + youtubeLink + '&autoplay=1" title="YouTube video player" width="418"></iframe>');
});

It works fine but i need to get the other “a” tag to work as normal.

the second link has class="not-video-link" and i want that to open a link as normal.

Here is the whole box:

        echo '<br />
        <div id="the-video-destination-div'.$id.'"  class="video-link" href="'.youtubelink(tolink($youtubevid)).'">
        <table style="background-color:#EDEFF4; font-size:11px; border:1px solid #ccc;">
        <tr><td><a ><img style="cursor:pointer;" align="left" src="'.$video_thumbnail.'" width="152px" height="114px" /></a></td>
        <td style="vertical-align:top; width:199px; padding:5px; cursor:default; " ><font style="color: #3B5998; text-decoration:none; font-weight: bold;"><font class="youtube-title"><a id="not-video-link" style="cursor:pointer;" href1="http://www.youtube.com/watch?v='.youtubetitle($wallrow["youtubevid"]).'" target="_blank">'.$video_title.'</a></font></font><font class="link-host"><br /><a href="http://www.youtube.com">www.youtube.com</a><br /><br />'.substr($video_description,0,149).'...</font></td></tr>
        </table></div><br />';

I have now changed from div with a href attr inside the div tag. Is that illigal?

I have found a soulution to the problem.

                $("a#not-video-link").click(function () {
                var youtubeLink1 = $(this).attr('href1');
                      window.open(youtubeLink1);
                      event.stopImmediatePropagation();

                    });

            $(".video-link").live("click", function(e) {
                    e.preventDefault();


                  // Capture the link's HREF attribute in a variable.
                  var youtubeLink = $(this).attr('href');
                  var youtubeDiv = $(this).attr('id');

                  // Set the HTML (the content) of the "video destination div" to = your iframe, including the youtubeLink that the user original saved into this node.
                  $('#' + youtubeDiv + '').html('<iframe style="margin-left:-12px; margin-right:-12px;" frameborder="0" height="234" src="' + youtubeLink + '&autoplay=1" title="YouTube video player" width="418"></iframe>');
                });

This makes the link stop the other link to launch and the other way around.

Answer 1

Nest Links are not allowed and simply considered as invalid construct.

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may
not be nested either.

Since that is the case the browser would not render them as nested.. It would simply create below as 2 different links (See proof / picture).

<a href="#" class="video-link">
  <a href="#" class="not-video-link">link</a>
</a>

Proof: http://jsfiddle.net/H44jE/ [click inspect and click on the links]

Also the construct looked different on different browsers..

Note: I am not sure what you are trying.. but as flec mentioned you should look for other options..

@Thayer no you don’t. Since you’re using preventDefault you can attach the click event to any html-tag