jQuery 对话框看不到全局变量

Question

当单击按钮时，我正在对话框中加载 HTML

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

#formModal 的 HTML 看起来像

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

此时HTML已成功加载到对话框中

我还有以下内容，当单击对话框内的#input1时，它将在#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 在这里不起作用。它没有被传递给点击处理程序。如果 HTML 最初位于 body 中并且未使用 load() 加载到对话框中，则它可以正常工作。这是什么原因造成的。

Answer 1

由于 forModal 是动态加载的，因此常规页面加载时无法使用 formEdit。

试试这个:

$("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
    });

})