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函数，允许我单击它们突出显示的尺寸和checn点击，并将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返回的结果时没有任何反应。如果我手动将一些测试结果添加到＃ProductSizeSelect_1 ul，这些可以点击并按预期工作，它只是通过ajax返回结果。

Answer 1

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

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

避免这个问题。加载jQuery时该元素不存在，但是使用它时，它应该在正文中搜索它并找到它。有这个问题几次。

jQuery Ajax多选择器

1 个答案: