在Jquery Mobile上使用append時獲取額外的數據

Question

我有兩次潛水，需要顯示某種形式的潛水。 由於某種原因當我使用append時，我得到了更多我沒有要求的文本。

這裏是HTML的

<div data-role="collapsible" data-theme="a" data-content-theme="a"> 
        <h3>טריקו קצר</h3> 

        <div dir="rtl" data-role="fieldcontain"> 
         <label for="select-choice-1" class="select">בחר צבע:</label> 
         <select name="select-choice-1" id="select-choice-1"> 
          <option value="standard">בחר</option> 
          <option value="לבן">לבן</option> 
          <option value="שחור">שחור</option> 
          <option value="כחול-ים">כחול-ים</option> 
          <option value="בורדו">בורדו</option> 
          <option value="ירוק">ירוק</option> 
          <option value="סגול כהה">סגול כהה</option> 
          <option value="אדום">אדום</option> 

         </select> 
        </div> 

        <div dir="rtl" data-role="fieldcontain"> 
         <label for="select-choice-2" class="select">בחר מידה:</label> 
         <select name="select-choice-2" id="select-choice-2"> 
          <option class="center-button"value="standard">בחר</option> 
          <option value="Small">S</option> 
          <option value="Medium">M</option> 
          <option value="Large">L</option> 
          <option value="EE">EE</option> 

         </select> 
        </div> 

        <div data-role="fieldcontain"> 
         <label for="slider" class="select">כמות:</label> 
         <input type="range" name="slider" id="slider" value="0" min="0" max="500" data-highlight="true" /> 
          <div class="ui-block-a button-basket"><button data-theme="b" id="triko" class="basket">הוסף לסל</button></div> 
        </div> 


       </div> 

                <!-- end TRIKO --> 

      <!-- ----------------------------------  GUFIOT ---------------------------------------- --> 

       <div data-role="collapsible" data-theme="a" data-content-theme="a"> 
        <h3>גופיות קייציות</h3> 

        <div dir="rtl" data-role="fieldcontain"> 
         <label for="select-choice-3" class="select">בחר צבע:</label> 
         <select name="select-choice-3" id="select-choice-3"> 
          <option value="standard">בחר</option> 
          <option value="לבן">לבן</option> 
          <option value="אפור אמריקאי">אפור אמריקאי</option> 
          <option value="שחור">שחור</option> 
          <option value="כחול-ים">כחול-ים</option> 
          <option value="בורדו">בורדו</option> 
          <option value="ירוק">ירוק</option> 
          <option value="סגול כהה">סגול כהה</option> 
          <option value="אדום">אדום</option> 
          <option value="כחול כהה">כחול כהה</option> 
          <option value="ירוק כהה">ירוק כהה</option> 
          <option value="טורקיז">טורקיז</option> 
          <option value="כתום">כתום</option> 
          <option value="צהוב">צהוב</option> 
          <option value="לילך">לילך</option> 
          <option value="חציל">חציל</option> 
          <option value="ורוד">ורוד</option> 
          <option value="תכלת">תכלת</option> 
          <option value="ירוק זית">ירוק זית</option> 
          <option value="אופוויט">אופוויט</option> 
          <option value="ורוד זועק">ורוד זועק</option> 
          <option value="חום">חום</option> 
          <option value="מג'ב/לוטר">מג"ב/לוטר</option> 
          <option value="צהוב בננה">צהוב בננה</option> 
          <option value="ירוק תפוח">ירוק תפוח</option>       
         </select> 

        </div> 

        <div dir="rtl" data-role="fieldcontain"> 
         <label for="select-choice-4" class="select">בחר מידה:</label> 
         <select name="select-choice-4" id="select-choice-4"> 
          <option class="center-button"value="standard">בחר</option> 
          <option value="Small">S</option> 
          <option value="Medium">M</option> 
          <option value="Large">L</option> 
          <option value="EE">EE</option>          
         </select> 
        </div> 

        <div data-role="fieldcontain"> 
         <label for="slider" class="select">כמות:</label> 
         <input type="range" name="slider" id="slider1" value="0" min="0" max="500" data-highlight="true" /> 
          <div class="ui-block-a button-basket"><button data-theme="b" id="gufiot" class="basket">הוסף לסל</button></div> 
        </div> 

       </div> 

<div class="order"> 
         <h3>פרטי ההזמנה</h3> 
         <p class="item_name"></p> 
        </div> 

               <!-- end gofiot --> 

這裏是我的JQ代碼 -

$(document).ready(function(){ 


     $('#slider').on('slidestop',function(){ 
     var changeVar = $('#slider').val(); 

     $(".ui-block-a").one('click',function(){ 
      $(".item_name").append("<h2>טריקו קצר</h2>" + "צבע:" + $("#select-choice-1").val() + ", כמות: " + changeVar + ", מידה: " + $("#select-choice-2").val() + "<br>") 
      $("#select-choice-1").val("standard") 
      $('#select-choice-1').selectmenu('refresh') 
      $("#select-choice-2").val("standard") 
      $('#select-choice-2').selectmenu('refresh') 
      $("#slider").val(0).slider("refresh"); 
      //$("#select-choice-1 option:selected").text("fffff"); 
     }); 
    }); 

     $('#slider1').on('slidestop',function(){ 
     var changeVar1 = $('#slider1').val(); 

     $("#gufiot").one('click',function(){ 
      $(".item_name").append("<h2>גופיות קייציות</h2>" + "צבע:" + $("#select-choice-3").val() + ", כמות: " + changeVar1 + ", מידה: " + $("#select-choice-4").val() + "<br>") 
      $("#select-choice-3").val("standard") 
      $('#select-choice-3').selectmenu('refresh') 
      $("#select-choice-4").val("standard") 
      $('#select-choice-4').selectmenu('refresh') 
      $("#slider1").val(0).slider("refresh"); 
      //$("#select-choice-1 option:selected").text("fffff"); 
     }); 
    }); 

如果我使用的第一個功能，然後使用第二個我得到另一條線，我沒有要求。所以insted的獲得的 -

טריקו קצר 

צבע:אפור אמריקאי, כמות: 308, מידה: Small 
גופיות קייציות 

צבע:שחור, כמות: 318, מידה: Small 
טריקו קצר 

我越來越 -

טריקו קצר 

צבע:אפור אמריקאי, כמות: 308, מידה: Small 
גופיות קייציות 

צבע:שחור, כמות: 318, מידה: Small 
טריקו קצר 

צבע:standard, כמות: 308, מידה: standard . 

如果我使用的功能它都好只是1 ...

Answer 1

解決我自己的問題！ 因爲「.ui-block-a」位於另一個表格上，所以我得到2個附加信息，因此它很開心...