JQuery: my class is not working during second call
I am new to jQuery. Just study and use it for 3 weeks so far. I wrote a class to organize stuff. I am calling my method with more than two events, but this event is not firing during my second event triggering. there is nothing wrong with a selector. I think my class is missing something. I dont know. please help! here's a 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 a function. when i click #btnPersonalNext
it works, but for #btnDocListBack
, not more.
here is my class ( jquery.content.js
). what it does is load html into specific _tag
with specific _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 content dynamically into a div with id #contentpaper
. I don't know how to reinstall, others who use the livequery plugin using this use:
$("#btnID").livequery('click',function(){});
-bgreen1989
source to share
I quickly went through it and the size of the code was a bit difficult to diagnose, so I thought a bit about making it clearer to me and others.
I think this is PART of the problem and BADTHING (TM) is your html generation by gluing strings together. This can break DOM event binding and make some really terrible code.
Also, if you are relying on a live query, the "concatenate strings together" method may not fire the dom events needed to generate the realtime trick (Not Certain), and you / can / 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);
source to share