0

我有一个基于类别的问题列表，一旦用户单击类别链接，就需要打开/关闭这些问题。类别和问题是通过 ajax 获得的。第一次它工作正常，但是当我单击其他选项卡并返回时，它不再工作了。

这是我的代码：滑动切换附加到触发器，显示类别和问题附加到类disp。任何帮助，将不胜感激。滑块快速打开和关闭。

jQuery(function() {

        $(".trigger1").live("click",function(){

        var str = $(this).find("span.imgplus").text();
        if (str.indexOf("+") >= 0)
            $(this).find("span.imgplus").html("- ");
        if (str.indexOf("-") >= 0)
            $(this).find("span.imgplus").html("+ ");

        $(this).next("div.dispnone").slideToggle("slow");

        });
     });


$(".disp").click(function(){

            var inputData = {
            usrid:$('#usrid').val(),buddyId:$('#qstbuddyid').val()};
             var qStr = ''; 

             $.getJSON("questions.json", inputData, function(response){

               var qlist = response.questModel.addQuestions;
                 var str = '';
                $.each(qlist,function(key,value){

                str += '<div class="trigger1" ><span class="imgplus" style="color:#FBBE16;font-weight:bold;cursor:pointer">+ &nbsp;</span><span style="color:#FBBE16;font-weight:bold;cursor:pointer">'+key+'</span><br/><p>&nbsp;</p></div>';
                     str+= '<div class="dispnone" style="padding-left:6px;padding-top:6px">';
                    for(var i=0; i<value.length;i++){
                        var chk= '';
                        if((value[i].isAdded)=='Y')
                            {
                                chk = "checked"
                            }

                     str += '<input style="cursor:pointer" type="checkbox" class="chkd" id="'+value[i].questId+'" '+chk+' /><span style="margin-left:2px" id="'+value[i].questId+'span1">'+value[i].questDesc+'</span><span class="dispnone" id="'+value[i].questId+'span2">'+value[i].questCategory+'</span><br/>';

               }
               str+= '</div>';

              }); 

               $("#qadd").empty();
               $("#qadd").html(str);
               });

这是我的 HTML：

               <div id="questions"  style="background: none repeat scroll 0 0 #FFFFFF;
         border: 2px solid #F1B717;
            font-family: Arial,Helvetica,sans-serif;
              font-size: 12px;
            margin-bottom: 2%;
             margin-left: 2%;
            text-align: left;
            width: 96%;
             z-index: 2;">

         <div class="subnav2" id="linklist">
         <ul class="menu">
        <li><a href="#qadd" class="disp">Add Questions</a></li>
        <li><a href="#qcreate" class="disp">Create  Question</a></li>
        <li><a href="#qtemplate" class="disp">Template</a></li>
          </ul>
          </div>
    <div  class="questiondata">
     <div id = "listquestions" class="dispshow">

    <c:forEach items="${questModel.questionsByCategory}" var="item" varStatus="loop">
     <div class="Addedquestion">
    <div class="Q">
     Q${loop.count}.</div>

        <div class="pquestion">
           ${item.questDesc}<span id="comm_<c:out value='${item.questId}'/>" style="display:none">${item.questComments}</span> 
          <a href="#"><img  class="deletequest" id="del_<c:out value='${item.questId}'/>" 
             src="${context_path}/assets/images/deletequestion.png" title="Delete this question" name="delquest" width="12" height="12"/>
          </a></div>
               </div>
           </c:forEach>
              <br>

           </div> <!-- end of listQuestions -->

                <div id = "addcreatetemplate" class="dispnone">


                 <div  id ="qadd" class="dispnone">

                          <c:forEach items="${questModel.addQuestionsByCategory}"      

<br><div class="trigger1"><div id="sign" style="float:left" class="plus">+</div>&nbsp;<div style="float:left">&nbsp;${entry.key}</div> <br> </div>

                                      <div class="hide-container"><br>
                                      <c:forEach items="${entry.value}" var="item" 
                                      varStatus="loop">
                                     <c:set var="sel" value=""/> 
                                     <c:if test="${item.isAdded eq 'Y'}">
                                     <c:set var="sel" value="checked"/>  
                                    </c:if>  


                                     <input class="chkd" type="checkbox" id = "${item.questId}" <c:out value="${sel}"/> /> 

                                      &nbsp;&nbsp;&nbsp;<span id = "${item.questId}span1"  name="${item.questDesc}">${item.questDesc}</span> 
                                    <span id = "${item.questId}span2" name="${item.questDesc}" style="display:none">${entry.key}</span>
                                <br/>
                                </c:forEach>

                                </div>    

                             </c:forEach>
               </div> <!-- end of qadd -->



               <div id = "qcreate" class="dispnone">  developed in future.</div>

             <div id ="qtemplate" class="dispnone"> developed in future.</div>



         </div> <!-- addcreate template -->
         </div> <!-- question data -->
         </div> <!-- questions -->
4

1 回答 1

1

使用.live()or.on()方法代替.click().

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。

于 2012-07-17T22:28:28.903 回答