Click events not allowing 2 function to work together, what am I doing wrong?
Hi,
I'm relatively new to JQuery and am having troubles trying to get two functions to work together. I have a pagination function and a modal dialog function. Each one is triggered by different anchor tags. My troubles happen whenever one function is triggered, the other function can not be triggered anymore. If I trigger the modal dialog, the pagination function can't be triggered, and when the pagination is triggered first, the modal dialog no longer triggers. I've tried to use .die() and .unbind() on the click events for the opposing function. That seems to work only once. then the opposing function can no longer be triggered. I think I am on the right path, just need to have some guidance on where I'm going wrong. Thanks in advance for all of your suggestions and help.
Here is the code that I'm using.
- <script type="text/javascript">
- $(document).ready(function() {
-
- /* Ajax pagination */
- $('#postPagination a').live('click', function(e){ /* triggered from <ul id="postPagination"> anchor tag */
- e.preventDefault(); /*prevent default action */
- var link = $(this).attr('href');
- $('#blog-wrapper').load(link+' #blog-content');
- });
-
- /* Ajax Modal dialog */
- $('a.postpopup').click(function(){ /* triggered from any anchor tag with class of .postpopup */
- $('#postPagination a').unbind('click'); /*unbind click event from pagination function */
- id = $(this).attr('rel');
- $('<div id="ajax-popup"></div>').hide().appendTo('body').load('http://localhost:8888/ajaxhandler/?id='+id).modal();
- return false;
- });
- });
- </script>