第一次之后，jQuery滑动切换不适用于动态绘制的数据(通过Ajax) [英] JQuery Slide toggle doesnot work with dynamically painted data( thru ajax) after first time

问题描述

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

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.

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

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

这是我的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 -->

推荐答案

使用 .live() 或 .on() 方法而不是

从jQuery 1.7开始，不推荐使用.live()方法.使用.on()来 附加事件处理程序.较旧版本的jQuery用户应使用 .delegate()优先于.live().

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().

这篇关于第一次之后，jQuery滑动切换不适用于动态绘制的数据(通过Ajax)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！