如何在jquery对话框中选择元素

让我先确认一下，我对jquery非常陌生。我已经用了一个月左右了，效果还算不错。我希望我的问题很容易回答

基本上，我在页面上有一个对话框，其中包含在DWR Ajax调用中生成的内容。我想做的是在我的内容中定义几个div，这样当单击标题div时，第一个div引用的第二个div标记需要通过被引用div上的jquery slideToggle函数隐藏/显示。尽管我可以尝试，但我无法调用此方法

下面是我调用的javascript方法，请注意，出于测试目的，我省略了dwr ajax调用，并在showdialog方法中手动设置html

对话框将正常打开并按预期显示我的内容。但是，单击包含扩展标题类的div不会切换被引用的“ELEMENT\u ONE”div的视图

如有任何想法或意见，将不胜感激。我确信我在做一些愚蠢的事情，但以我的生命来说，我无法解决它

Javascript

function showdialog() {

var data = '<DIV class="expansion-header" reference="ELEMENT_ONE">'
        + '<B>Click to Toggle Element One<B></DIV>' 
        + '<DIV id="ELEMENT_ONE" name="ELEMENT_ONE">'
        + 'This is element ones text it contains a<BR>few lines of gibberish.<BR><BR>'
        + 'This is the second paragraph to be hidden when the header is clicked</DIV>';

  $("#StatusDialog").html(data);
  $("#StatusDialog").dialog("open");   
}

$(document).ready(function() {

  $(".expansion-header").click(function () {
    var reference = $(this).attr('reference');
    $("#" + reference).slideToggle(400);
  });

  $("body").append('<div id="StatusDialog" title="Dialog Title"></div>');
  $("#StatusDialog").dialog({  
    autoOpen: false,    
    resizable: true,
    width: 750,
    modal: false           
  });    
});

函数showdialog（）{
var数据=“”
+'单击以切换元素一'
+ ''
+'这是element One的文本，它包含几行胡言乱语。

'
+'这是单击标题时要隐藏的第二段'；
$（“#StatusDialog”）.html（数据）；
$（“状态对话框”）。对话框（“打开”）；
}
$（文档）.ready（函数（）{
$（“.expansion header”）。单击（函数（）{
var reference=$（this.attr（'reference'）；
$（“#”+参考）。滑动切换（400）；
});
$（“正文”）。附加（“”）；
$（“#状态对话框”）.dialog（{
自动打开：错误，
可调整大小：正确，
宽度：750，
模态：假
});    
});

HTML

<div id="status" class="status" style="cursor: pointer; cursor: hand;" onclick="showdialog()">Click Me</div>

点击我

我相信，当你显示一个对话框时，你看到的html实际上是你正在查看的页面的一部分。因此，您应该能够像其他jquery选择器一样浏览DOM中的元素。例如，你应该能够说：

$('#ELEMENT_ONE').Html('<p>New Content</p>');

$（'#ELEMENT_ONE'）.Html（'新内容
'）；

我相信，当你显示一个对话框时，你看到的html实际上是你正在查看的页面的一部分。因此，您应该能够像其他jquery选择器一样浏览DOM中的元素。例如，你应该能够说：

$('#ELEMENT_ONE').Html('<p>New Content</p>');

$（'#ELEMENT_ONE'）.Html（'新内容
'）；

您已经为

.expansion header

定义了单击事件，然后该事件才存在

应在

showdialog（）中附加单击事件

或考虑使用
 绑定它，您已经定义了用于<代码>的点击事件。扩展标题在它存在之前！
应在
showdialog（）中附加单击事件

或考虑使用
 
 Works
$（文档）.ready（函数（）{

$（“.expansion header”）.live（'click'，函数（）{

}))

$（“#状态”）。单击（函数（）{

var数据=“”
+'单击以切换元素一'
+ ''
+'这是element One的文本，它包含几行胡言乱语。

'
+'这是单击标题时要隐藏的第二段'

$("#StatusDialog").html(data);
$("#StatusDialog").dialog("open");  

}))

$（“正文”）。附加（“”）；
$（“#状态对话框”）.dialog（{

自动打开：错误，

可调整大小：正确，
宽度：750，
模态：false

})；

});

工作

$（文档）.ready（函数（）{

$（“.expansion header”）.live（'click'，函数（）{

}))

$（“#状态”）。单击（函数（）{

var数据=“”
+'单击以切换元素一'
+ ''
+'这是element One的文本，它包含几行胡言乱语。

'
+'这是单击标题时要隐藏的第二段'

$("#StatusDialog").html(data);
$("#StatusDialog").dialog("open");  

}))

$（“正文”）。附加（“”）；
$（“#状态对话框”）.dialog（{

自动打开：错误，

可调整大小：正确，
宽度：750，
模态：false

})；

});

你，先生。。。你是明星。我告诉过你我在做傻事！我更改了单击代码以使用live（）函数和viola！非常感谢：）@Jason，如果这个答案解决了问题，请务必接受它。@GregL，谢谢你的提示，新的堆栈溢出，因此不确定要求。我已按建议接受了这个答案。干杯，杰森，先生。。。你是明星。我告诉过你我在做傻事！我更改了单击代码以使用live（）函数和viola！非常感谢：）@Jason，如果这个答案解决了问题，请务必接受它。@GregL，谢谢你的提示，新的堆栈溢出，因此不确定要求。我已按建议接受了这个答案。干杯，杰森。谢谢你，正如上面所说的那样，.live（）方法非常有效。我的页面现在可以正常工作了。感谢您的努力：）谢谢您，正如上面所说，.live（）方法非常有效。我的页面现在可以正常工作了。感谢您的努力：）