Populate a container by clicking a link ...currently it does this on load_问答_开发者

Populate a container by clicking a link ...currently it does this on load

开发者 https://www.devze.com 2022-12-17 20:35 出处：网络

相关专题：jquery

<script type="text/javascript">

$(document).ready(function() {
$("a").click(function(event) {
  alert("Thanks for visiting!");
  });
 });
</script>

<style>
 div.iframe-link {
 position: relative;
 float: left;
 width: 175px;
 height: 205px;
 margin: 0 1em 1em 0;
 border: 3px solid blue;
 }

  a.iframe-link {
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
</head>

<body>

<a href="swedish.html">click link to pop开发者_运维百科ulate container</a><br>  

<!-- note: it populates the container at load currently ... I only want it to 
populate     after clicking the link -->  
<div class="iframe-link">  
<iframe src="swedish.html?style=sandbeach" style=" border-width:2 " width="175"     
height="175" frameborder="2" scrolling="no"></iframe>
</div>   


</body>
</html>

You need to return false in your click handler.

Also, in some browsers, that may not be enough -> you should also call preventDefault().

Here's a working example:

$( function() {
    $( "a" ).click( function( e ) {
        $('.iframe-link').html( '<iframe src="swedish.html?style=sandbeach" style=" border-width:2 " width="175" height="175" frameborder="2" scrolling="no"></iframe>' );
        e.preventDefault();
        return false;
    });
});

something like this one:

$( function() {
        $( "a" ).click( function() {
            var link = $(this).attr("href");
            $('.iframe-link').html( '<iframe src="'+ link  +'"></iframe>' );
            return false;
        });
 });

Like this:

$(function() {
    $("a").click(function(event) {
        $('.iframe-link').html('<iframe src="swedish.html?style=sandbeach" style=" border-width:2 " width="175" height="175" frameborder="2" scrolling="no"></iframe>');
        return false;    //Prevent the default action.
    });
});

Note that this will handle the click event for all hyperlinks, which is probably not what you want.

You should use a more specific selector; the best thing to do is to give your <a> element a class or id.

Something like:

jQuery(function($) {
  $('a').click(function() {
    $('.iframe-link').load("swedish.html?style=sandbeach");
    return false;
  });
});

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

I'd use preventDefault( )

$("a").click(function(event){
  event.preventDefault();
  // do something
});

but in reality, I'd assume you're doing the same thing behind the scenes. However, I trust jQuery should know about any browser quirks that I may not know of (that could make it do something other than return false; in special or complex cases).