Load url only one time on click

I want to be able to load an url only once after clicking a button. I have this:

$("#button").click(function () { 
      $("#frame").attr("src", "htt开发者_开发问答p://www.google.com/");
});

Unfortunately this loads the iframe every sigle time I click the button. This is the complete code: JS Bin

replace .click() with .one('click', function() {

However, that would leave the button without any functionality afterwards, so you might want to remove or disabled it aswell in the event handler.

In case you only want to "temporarily" disable the button while the <iframe> is loading, do it like this:

var myClickHandler = function myClickHandler() {
    $(this).unbind( myClickHandler );

    $('#frame').attr('src', 'http://www.google.com').load(function() {
        $('#button').click( myClickHandler );
    });
};

$('#button').click( myClickHandler );

You can use the jQuery .one() method found here. For example:

$("#button").one('click', function () { 
    $("#frame").attr("src", "http://www.google.com/");
});

Hope this helps.

unbind the event like

$("#button").click(function (e) { 
      alert("good bye my friend");
    $(this).unbind(e.eventType);
});

http://jsfiddle.net/EVhJV/