jQuery Dialog cannot see Global Variables

I'm loading HTML in dialog when button is clicked on

$("button").live('click', function() {
    var $div = $('<div title="Form"></div>');
    $div.load('test.html #开发者_JS百科formModal').dialog({
        width: 900,
        height: 500
    })
})

The HTML of #formModal looks like

  <form id="form">
    <input id="input1" type="button" />
    <input ...
  </form>
  <p id="formEdit"></p>

At this point HTML is successfully loaded in dialog

I also have the following, which when #input1 inside dialog is clicked, it will insert text inside #formEdit.

var $form = $('#form'); // global variable
var $formedit = $('#formEdit'); // global variable
$form.find('#input1').live('click', function(){
 $formedit.text('test'); //if i do $('#formEdit') instead of $formedit then it works
})

$formedit is not working here. It's not being passed to the click handler. it works fine if HTML was initially in body and not loaded in dialog using load(). What is causing this.

Since forModal is loaded dynamically formEdit is not avaialble with the regular page load.

Try this instead:

$("button").live('click', function() {
    var $div = $('<div title="Form"></div>');
    $div.load('test.html #formModal', function(){
      //#######ASSIGN THE #formEdit once the load is complete
      $formedit = $('#formEdit');
    }).dialog({
        width: 900,
        height: 500
    });

})

try something like:

var $form = $('#form'); // global variable
var $formedit = $('#formEdit'); // global variable
$form.find('#input1').live('click',{formedit: $formedit} , function(e){

 e.data.formedit.text('test'); //if i do $('#formEdit') instead of $formedit then it works
})