How to select an element within a jquery dialog

let me start by qualifying that I am very new to jquery. I've been using it for a month or so now with moderate success. I'm hoping my question is easily answered.

Basically, I have a dialog on a page that contains content that is generated within a DWR Ajax call. What I want to do is define a couple of divs in my content such that when a header div is clicked, the second div tag referenced by the first needs to be hidden / shown via the jquery slideToggle function on the referenced div. Try though I might however, I am unable to get this method to be called.

Here is the javascript method I am calling, please note that for testing purposes I have omitted the dwr ajax call and am manually setting the html in the showdialog method.

The dialog opens fine开发者_运维问答 and displays my content as expected. However clicking the div containing the expansion-header class does not toggle the view of the referenced 'ELEMENT_ONE' div.

Any thoughts or comments would be most appreciated. I am sure I am doing something silly, but for the life of me I can't work it out.

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           
  });    
});

HTML

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

You have defined the click event for .expansion-header before it exists!

should attach the click event in showdialog()

or consider binding it using .live()

I believe that when you display a dialog the html you are seeing is actually part of the page you are viewing. So you should be able to browse elements in the DOM just like any other jquery selector. For example you should be able to say:

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

this here works

$(document).ready(function() {

$(".expansion-header").live( 'click', function () {

var reference = $(this).attr('reference');
$("#" + reference).slideToggle(400);  

});

$('#status').click(function(){

var data = '' + 'Click to Toggle Element One' + '' + 'This is element ones text it contains a
few lines of gibberish.

' + 'This is the second paragraph to be hidden when the header is clicked';

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

});

$("body").append(''); $("#StatusDialog").dialog({
autoOpen: false,
resizable: true, width: 750, modal: false
});
});