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