JQuery Slide toggle doesnot work with dynamically

Question

I have a list of questions based on category that need to open up/close once the user clicks on the category link. The categories and questions are obtained thru ajax. The first time it works fine, but when I click on some other tab and come back it doesn't work anymore.

Here is my code: slide toggle is attached to the trigger and showing the categories and questions is attached to the class disp. Any help would be appreciated. The slider quickly opens and closes back.

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);
               }); 

Here is my 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 -->

Answer 1

Use the .live() or .on() methods instead of .click().

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().