Home/ Questions/Q 100377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T00:34:05+00:00

I am new to jQuery.just learn and use it for 3 weeks until now.

  • 0

I am new to jQuery.just learn and use it for 3 weeks until now. I have written a class to organize stuff. I call my method with more than 2 events,but the event does not work during my trigger of the second event. there’s nothing wrong with the selector. I think there’s something missing in my class. I don’t know. please help! here’s the snippet:

$('#btnPersonalNext, #btnDocListBack, #pDocList').livequery('click',function() {   var docListContent = 'loadDocumentList.php';   $('#contentpaper').addContent(   {     _tag:'div',     _id: 'contentDocList',     _class: 'content',     _content: docListContent,     _heading: 'Document List'   });   //store personal info in session: });

addContent() is the function. when I click #btnPersonalNext,this works, but for #btnDocListBack, not any-more.

here’s my class (jquery.content.js). what it does is load html into a certain _tag with a particular _id.

(function($) {   $.fn.addContent = function(options)   {     var defaults = {       _tag: 'div',       _id: '',       _class: '',       _content: '',       _heading: '',       _clearExisting:'yes',       _insertAfterID:'',       _deleteBeforeInsert:'no'     };     var options = $.extend(defaults, options);      return this.each(function()     {       obj = $(this);       if(options._clearExisting=='yes'){         obj.empty();       }       if(options._deleteBeforeInsert =='yes'){         $('#'+options._id).remove();       }        var innerHtml = '<' + options._tag + ' id='' + options._id + '' class='' + options._class + ''>';       if(options._heading!=''){         innerHtml += '<h2>' + options._heading + '</h2>';       }        if(/^[A-Za-z0-9]+\.php(\??([A-Za-z0-9]+=[A-Za-z0-9]+)(&[A-Za-z0-9]+=[A-Za-z0-9]+)*)?$/.test(options._content))       {//if .php         $.get(options._content,function(data)         {           //handle response from server here.           innerHtml += data;           innerHtml +='</' + options._tag + '>';           if(options._insertAfterID !=''){             $('#'+options._insertAfterID).after(innerHtml);           }           else{             obj.html(innerHtml);            }         });       } // PHP rule        else       {// .html         innerHtml += options._content;         innerHtml +='</' + options._tag + '>';         if(options._insertAfterID !=''){           $('#'+options._insertAfterID).after(innerHtml);         }         else{           obj.html(innerHtml);          }       } // HTML rule      }); // End of Returned Function   };// End of addContent definition })(jQuery);

hoping for answers, thank you so much!

here’s my DOM structure:

 <!-- JS  --> <script type='text/javascript' src='jquery_plugins/jquery-1.2.6.js' ></script> <script type='text/javascript' src='jquery_plugins/jquery.livequery.js' ></script> <script type='text/javascript' src='jquery_plugins/jquery.simplemodal.js'></script> <script type='text/javascript' src='jquery_plugins/jquery.session.js'></script> <!--<script type='text/javascript' src='jquery_plugins/jquery-plugin-wrapinner.js'></script>--> <script type='text/javascript' src='jquery_plugins/jquery.content.js'></script> <script type='text/javascript' src='jquery_plugins/osra_main.js'></script> </head>  <body> <div id='wrapper'>        <div id='header'>         <div id='headercontent'>Please Enable JavaScript to Continue</div>     </div>     <div id='main'>         <div id='sidebarpaper' class='left'>             <!-- sidebar contents (class='sidebar')-->         </div>         <div id='contentpaper' class='right'>             <!-- main contents (class='content')-->         </div>         <div id='modals' class='clear'>             <!--modal pop-up window -->         </div>     </div>     <div id='footer'><p></p></div> </div> </body> </html>

I am loading the content dynamically in div with id #contentpaper. I don’t know how to rebind, other that using livequery plugin, with this usage: $('#btnID').livequery('click',function(){});

-bgreen1989

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I gave it a quick look over and the code size was a little hard to diagnose, so I re factored a bit hoping to make it more understandable to myself and others.

    What I think is PART of the problem and a BADTHING(TM) is your generation of html by gluing strings together. This can break DOM event binding, and render really awful code.

    Also, seeing you are relying on live-query, the ‘glue strings together’ method may not be triggering the dom events required to make live-query trick (Not Certain) and you /may/ find using DOM methods to generate DOM elements should solve this problem

    (function($){   $.fn.addContent = function(options)   {     var defaults = {       _tag: 'div',       _id: '',       _class: '',       _content: '',       _heading: '',       _clearExisting:'yes',       _insertAfterID:'',       _deleteBeforeInsert:'no'     };     var options = $.extend(defaults, options);     var phpregex = /^[A-Za-z0-9]+\.php(\??([A-Za-z0-9]+=[A-Za-z0-9]+)(&[A-Za-z0-9]+=[A-Za-z0-9]+)*)?$/;      var x_generateElement = function()     {       var container = document.createElement(options._tag);        $(container).attr('id', options._id);        $(container).addClass(options._class);       if(options._heading!=''){         var header = document.createElement('h2');          $(header).text( options._heading );          $(container).append(header);       }       return container;     };      var x_preClear   = function( obj )     {       if(options._clearExisting=='yes'){         obj.empty();       }       if(options._deleteBeforeInsert =='yes'){         $('#'+options._id).remove();       }       return obj     };      var x_addElement = function( e , obj )     {             if(options._insertAfterID !=''){             $('#'+options._insertAfterID).after(e);       }       else{         obj.html(e);        }       return obj;     };      return this.each(function()     {       var obj = x_preClear( $(this) );       var container = x_generateElement();         if( phpregex.test(options._content)){         $.get(options._content,function(data){           //handle response from server here.           $(container).append(data);           obj = x_addElement(container, obj);         });       } else {         $(container).append(options._content);         obj = x_addElement(container, obj);       }      });   }; })(jQuery);
    • 0