jQuery的阿賈克斯多重選擇

我有填充用ajaxjQuery的阿賈克斯多重選擇

<select name="ProductSizeType_field" id="ProductSizeType_field"> 
<option value="-1">Please Select...</option> 
<option value="NotRequired">Not Required</option> 
<option value="Circumference">Circumference</option> 
<option value="ShoeSize">ShoeSize</option> 
<option selected="" value="WaistSize">WaistSize</option> 
<option value="ShirtSize">ShirtSize</option> 
</select>

它運行一段AJAX的填充列表的人多選擇尺寸

$('#ProductSizeType_field').on('change', function (e) { 
    var select_id = $(this).val(); 
    var compare_id = "<?php echo $ProductSizeType; ?>"; 

    var dataString = 'AjaxCall=ProductSize&compare_id='+compare_id+'&select_id='+select_id; 

    jQuery.ajax({ 
     type: "POST", 
     url: "/product.editor.ajax.php", 
     data: dataString, 
     beforeSend: function(){ 
     }, 
     complete: function(){ 
      jQuery("Show_ProductSize").show(); 
     }, 
     success: function(response){ 
      jQuery("#ProductSizeSelect_1 ul").append(response); 
     } 
    }); 
});

此列表下拉列表帶回一組結果。

<div id="ProductSizeSelect_1" class="MultiSelect"> 
    <ul class="ClearFix"> 
     <li id="6"> 
      <div title="UK1">UK1</div> 
      <input type="hidden" name="ProductSize_field[]" id="ProductSize6_field" value=""> 
     </li> 
     <li id="7"> 
      <div title="UK2">UK2</div> 
      <input type="hidden" name="ProductSize_field[]" id="ProductSize7_field" value=""> 
     </li> 
     <li id="8"> 
      <div title="UK3">UK3</div> 
      <input type="hidden" name="ProductSize_field[]" id="ProductSize8_field" value=""> 
     </li> 
    </ul> 
</div>

我還創建了一個jQuery的功能，讓我點擊尺寸和checn點擊他們突出，也將標識加入隱藏的輸入字段

$(function() { 
    $("#ProductSizeSelect_1 li").click(function() { 
     $(this).toggleClass("selected"); 
     var SizeID = $(this).attr("id"); 
     var CurrentSizeValue = $('#ProductSize'+SizeID+'_field').val(); 

     if(CurrentSizeValue === SizeID){ 
      $('#ProductSize'+SizeID+'_field').val(""); 
     }else{ 
      $('#ProductSize'+SizeID+'_field').val(SizeID); 
     } 
    }); 
});

然而，沒有任何返回的結果是可點擊的。當我點擊ajax返回的結果時，沒有任何反應。如果我手動向＃ProductSizeSelect_1 ul添加一些測試結果，它們可以點擊並按預期工作，其結果只是通過ajax返回。

來源

2017-03-09 user1315422

http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click –

您的問題是<li>是動態添加的。您應該將您的點擊功能更改爲

$(document).on("click", "#ProductSizeSelect_1 li", function() ...

以避免此問題。當jQuery被加載時，該元素不存在，但是它應該在body中搜索並找到它。有這個問題幾次。

來源

2017-03-09 12:16:38 yomisimie

非常感謝你，它一直讓我瘋狂多年... – user1315422

沒問題，就像我說的有這個問題直到我明白了幾次。 – yomisimie

jQuery的阿賈克斯多重選擇

回答

相關問題