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>
