jQuery Ajax多选择器

Question

我有一个下拉列表，该列表使用ajax

填充列表

<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函数，以允许我单击尺寸，然后单击它们突出显示，并将ID放入隐藏的输入字段

$(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返回的结果时，什么都不会发生。如果我手动向#productizeSelect_1 ul手动添加一些测试结果，则可以单击并按预期工作，它的结果只是通过Ajax返回。

Answer 1

您的问题是动态添加了<li>。您应该将点击功能更改为

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

避免此问题。加载jQuery时不存在该元素，但是这样一来，它应该在体内搜索并找到它。有几次问题。