多個下拉列表在jQuery中不起作用

Question

我試圖創建一個多重下拉列表，這里是HTML，JS代碼

<div class="meaaow">
<select style="margin-top:10px;width: 90%;margin-left:5px;" name="3223|887" id="3223" class="pp ProjectType_1" required="" pattern="[^a-zA-Z0-9]">
    <option value="0" selected="">Requirements</option>
    <option value="Services">Services</option>
    <option value="Products" selected="">Products</option>
</select>

<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3224|888" id="3224" class="qq SubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
    <option value="">Select Category</option>
</select>

<select style="margin-bottom:10px;width: 90%;margin-left:5px;" name="3387|947" id="3387" class="SubsubProjectType_1" required="" pattern="[^a-zA-Z0-9]">
    <option value="0">Select Sub Category</option>
</select>
</div>

JS

在鏈接上填寫Js

FIDDLELINK

所以我想做的是

$('.pp').change(function () {
    var classNamex = $(this).attr('class');
    var pTypeBufr = classNamex.split(' ');
    var ptype = pTypeBufr[1].split('_');
    var OptIndex = $('option:selected', $(this)).index();
    var optionx = "<option value=''>Select Category</option>";


    //alert(OptIndex);
    if(OptIndex !=4)
    {
        var SubProject_arr = s_a[OptIndex].split("|");
        for (var i = 0; i < SubProject_arr.length; i++) {

            optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
        }
    }
    if(OptIndex ==1)
    $('.SubProjectType_'+ptype[1]).removeClass('qq').addClass('uu').html(optionx);
    if(OptIndex ==2)
    $('.SubProjectType_'+ptype[1]).removeClass('uu').addClass('qq').html(optionx);
});

對於兩個不同的類，我有兩個這樣的功能

$('.qq').change(function () {
        var classNamex = $(this).attr('class');
        var pTypeBufr = classNamex.split(' ');
        var ptype = pTypeBufr[1].split('_');
        var OptIndex = $('option:selected', $(this)).index();
        var optionx = "<option value=''>Select Sub Category</option>";


        alert('sssss');
        if(OptIndex ==2)
        {
            var SubProject_arr = t_a[OptIndex].split("|");
            for (var i = 0; i < SubProject_arr.length; i++) {

                optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
            }
        }
       // alert('.SubProjectType_'+ptype[1]);
        $('.SubsubProjectType_'+ptype[1]).html(optionx);
    });

和類.uu

$('.uu').change(function () {

    var classNamex = $(this).attr('class');
    var pTypeBufr = classNamex.split(' ');
    var ptype = pTypeBufr[1].split('_');
    var OptIndex = $('option:selected', $(this)).index();
    var optionx = "<option value=''>Select Sub Category</option>";


    alert('im inside uu');

        var SubProject_arr = u_a[OptIndex].split("|");
        for (var i = 0; i < SubProject_arr.length; i++) {

            optionx += "<option value='" + SubProject_arr[i] + "' >" + SubProject_arr[i] + "</option>";
        }

   // alert('.SubProjectType_'+ptype[1]);
    $('.SubsubProjectType_'+ptype[1]).html(optionx);
});

所以基本上我正在更新第二個下拉列表的類名，但是每次我使用第二個下拉列表時，總是會觸發與.qq類相關的功能

請幫我

Answer 1

我在原始HTML中找不到類uu ，而且我看到您可以動態切換類uu和qq 。

對動態內容上的事件使用事件委托：

     $(document).on('change', '.pp', function () { .....
     $(document).on('change', '.qq', function () { .....
     $(document).on('change', '.uu', function () { .....