2008-12-15 129 views
0

我是jQuery.just的新手,学习并使用它3周直到现在。 我已经写了一个类来组织东西。 我给我的方法调用了2个以上的事件,但是在我触发第二个事件期间该事件不起作用。 选择器没有问题。 我认为我班有些东西缺失。我不知道。 请帮忙! 这里的片段:Jquery:我的班级在第二次电话中不起作用

$("#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()是函数。 当我点击#btnPersonalNext,这工作,但#btnDocListBack,没有更多。

这是我的班级(jquery.content.js)。它所做的是将HTML加载到特定的_tag中,并将其加载到特定的_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); 

希望的答案,太感谢你了!

这里是我的DOM结构:

 
<!-- 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> 

我动态加载内容的div id为#contentpaper。 我不知道如何重新绑定,其他的,使用的liveQuery插件,有了这个用法: $("#btnID").livequery('click',function(){});

-bgreen1989

+0

我看不到你正在谈论的按钮在哪里定义? btnDocListBack btnPersonalNext等? – krosenvold 2008-12-15 10:34:41

回答

2

我在给它一个快速查找和代码大小有点难以诊断,所以我有点想要让自己和其他人更容易理解。

我认为是问题的一部分,BADTHING(TM)是通过将字符串粘在一起来生成html的。这可能会破坏DOM事件绑定,并呈现非常糟糕的代码。

另外,看到你依赖于实时查询,“粘合在一起的字符串”方法可能不会触发生成实时查询技巧(不确定)所需的dom事件,并且您可能会发现使用DOM方法生成DOM元素应该可以解决这个问题

(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); 
相关问题