You're right, I guess after getting used to the standard way of doing it without livequery I just totally missed that.
I'm still having a problem though, I changed the code so the livequery event only ever fires once, but no matter which groups I click the "Ass question" button for the result is the new question is always added to the first group I added a question to. Here's the updated code: <!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 dialogNewGroup; var dialogNewQ; $('#cmsAddGroup').click (function () { if (dialogNewGroup) { dialogNewGroup.dialog ('open'); } else { dialogNewGroup = $('#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 () { var div = $('fieldset', $(this).parent ().parent ()); if (dialogNewQ) { dialogNewQ.dialog ('open'); } else { dialogNewQ = $('#cmsDgNewQ').show ().dialog ({ title : 'New Question', buttons : { 'Create' : function (evt) { var label = $('#label', this).val (); if (label) { new QuestionString (div, label); } $(this).dialog ('close'); }, } }); } }); }); --> </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> On May 30, 2:50 pm, "Brandon Aaron" <[EMAIL PROTECTED]> wrote: > After a quick glance at the code you pasted... it looks like you are using > the Live Query plugin within the click event. This somewhat negates the > purpose of Live Query. Try moving the Live Query block outside the 'click' > binding block ... within the document.ready block. > > -- > Brandon Aaron > > On Fri, May 30, 2008 at 8:35 AM, Gordon <[EMAIL PROTECTED]> wrote: > > > 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 <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>
