jquery function problem

Question

what's wrong with this code, first time I click the submit button it loads the iframe once, then clicking it again will load the iframe twice. and so on..

code: JS

$(function() {

$("form").submit(function() {
     //
    $("form").attr('target','myframe');
    $('#myframe').load( function(){    

      alert('Hello');
      });

  });

});

HTML:

<form id="form1" name="form1" target="myframe"><input type="submit"  value="form1"/></form>
<div id="div1"></div>
 <iframe id="myframe" name="myframe" src="mypage.php" style="width:100%;height:400px;border:1px solid #ccc;"></iframe>

Answer 1

My guess is that you are running that JS more then once possibly with each load that is attaching more functions to the form submit event. I would like more of the code if possible.

Answer 2

you are adding new 'load' event handler each time you submit - event handlers DO accumulate .. so move the $('#myframe').load outside of the submit() handler .. or do a .unbind('load').load(... if it needs to behave differently for each submit()