[jQuery] Livequery event firing multiple times

[jQuery] Livequery event firing multiple times


I'm working on a survey builder which will allow users to create
online surveys and polls. I decided to use livequery to build it as
it involves lots of adding and deleting of DOM items that have
associated events.
I'm still at an early stage of development but I've run into a snag.
The function I've attached with LiveQuery to the "Add new question"
button seems to fire once for every question group that has been
added, even though every time it fires the expected DOM element. For
example, if I add 3 groups, then click the "Add new question" button
for the second group, I get 3 DIV objects getting logged to the
console, although all 3 refer to the sane item, namely the second
div.
I'm obviously doing something wrong but the livequery documentation is
rather sparse. I'm wondering if anyone else has run into this, what
do I need to be doing differently?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.cmsDialog {
    display: none;
}
-->
</style>
<link rel="stylesheet" href="/js/jquery/ui/themes/flora/flora.all.css"
type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.livequery.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.core.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.draggable.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.resizable.js"></
script>
<script type="text/javascript" src="/js/jquery/ui/ui.dialog.js"></
script>
<script type="text/javascript">
<!--
function QuestionGroup (title, subtitle, target)
{
    var    self                = this;
    self.wrapper            = $('<div></div>');
    self.header                = $('<h3>'
                                + title
                                + '</h3><h4>'
                                + subtitle
                                + '</h4>');
    self.fieldSet            = $('<fieldset><legend>'
                                + title
                                + '</legend></fieldset>');
    self.optBar                = $('<div class="optBar></div>');
    self.questionBut        = $('<input type="button" class="addQ" value="Add
question" />');
    self.construct            = function ()
    {
        self.optBar.append (self.questionBut);
        self.wrapper.append (self.header);
        self.wrapper.append (self.fieldSet);
        self.wrapper.append (self.optBar);
        target.append (self.wrapper);
    };
    self.construct ();
}
function QuestionString (target, label)
{
    var self        = this;
    self.container    = $('<div></div>');
    self.label        = $('<label>' + label + '</label>');
    self.input        = $('<input type="text" />');
    self.construct    = function ()
    {
        self.container.append (self.label);
        self.container.append (self.input);
        target.append (self.container);
    };
    self.construct ();
}
function QuestionText ()
{
}
function QuestionCheck ()
{
}
function QuestionRadio ()
{
}
function QuestionSelect ()
{
}
function QuestionGrid ()
{
}
function QuestionGridRow ()
{
}
$(document).ready (function ()
{
    var dialogNewQ;
    $('#cmsAddGroup').click (function ()
    {
        if (dialogNewQ)
        {
            dialogNewQ.dialog ('open');
        }
        else
        {
            dialogNewQ    = $('#cmsDgNewGroup').show ().dialog ({
                title    : 'New Question Group',
                buttons    : {
                    'Create'    : function (evt)
                    {
                        var title        = $('#groupTitle', this).val ();
                        var question    = $('#groupQuestion', this).val ();
                        new QuestionGroup (title, question, $('#cmsSurveyPreview'));
                        $(this).dialog ('close');
                    },
                    'Cancel    '    : function (){$(this).dialog ('close');}
                }
            });
        }
        $('.addQ').livequery ('click', function ()
        {
            console.log ($(this).parent ().parent ());
        });
    });
});
-->
</script>
</head>
<body>
<form>
<div id="cmsSurveyPreview"></div>
<div id="controls">
<input type="hidden" name="srv_content" />
<input type="button" id="cmsAddGroup" value="Add group" />
<input type="submit" value="Done" />
<div class="cmsDialog flora" id="cmsDgNewGroup">
<ul>
<li><label for="groupTitle">Title</label><input id="groupTitle" /></
li>
<li><label for="groupQuestion">Question</label><input
id="groupQuestion" /></li>
</ul>
</div>
<div class="cmsDialog flora" id="cmsDgNewQ">
<ul>
<li><label for="label">Label</label><input id="label" /></li>
</ul>
</div>
</div>
</form>
</body>
</html>