选择的插件更改在页面重新加载时不起作用

Question

我的问题是：我正在使用选择的插件。 2 选择框。选择第一个SelectBox选项时，在第二个选择框中过滤。它工作正常。但是当我用 ajax 重新加载页面时，第一个选择框值被选中但看起来它没有激活，它无法过滤第二个选择框值。我尝试模拟更改事件，尝试触发选择框，但我没有运气。

我会展示一些源代码：

Ajax 调用：

    function loadContent(url){
var slidersGetUrl = "&slider1="+slider1Val1+"&slider2="+slider1Val2+"&slider3="+slider1Val3+"&slider4="+slider1Val4+"&slider5="+slider1Val5+"&slider6="+slider1Val6;

            var planUrl = "&plan="+selectedplan;
            var paymentPeriodUrl = "&billing="+selectedpaymentperiod;
            var cpUrl = "&cp="+selectedcp;
            var osUrl = "&os="+selectedos;

            $.ajax({
                type: "get",
                url: "aa/aa/aa/aa.php" + url + slidersGetUrl + planUrl + paymentPeriodUrl + cpUrl + osUrl,
                //url: url,
                beforeSend: function(){
                    $('#plans-block').html('loading...');
                },
                success: function(data){
                       $('#plans-block').html("");
                       $('#plans-block').html(data);
                      //$('#ajax-wrap').slideToggle();
                      //console.log(data);
                },
                error: function(){
                  $('#plans-block').html("Failed. Please reload the page!");
                }
              });
        }

然后我在 ajax 中有一个很大的 HTML 块，称为文件，其中选择框被制作

这是我的选择框 1：

<select id="cp" name="cp">
                    <option value="-1"><?php echo $_LANG['none'] ?></option>
                    <?php
                    foreach ($controlpanels as $cp):
                        $os_price = (float) $cp['price'];
                        if ($os_price < 0)
                            continue;
                        ?>
                        <option data-price="<?php echo $os_price; ?>" data-bc="<?php echo $cp['bc']; ?>" value="<?php echo $cp['id']; ?>" <?php echo ($cp['id'] == $_GET['cp'] ? 'selected' : '') ?>><?php echo $cp['name']; ?></option>
                    <?php endforeach; ?>
                </select>

然后我有 javascript

  $(document).ready(function () {
        ...

        $('#cp').change(function () {
            $($(this)).children().each(function (i, j) {
                if ($(this).val() > 0)
                    order.removeAdittionalProduct($(this).val());
            });

            if ($(this).val() > 0)
                updatePrice(
                        order.addAdittionalProduct($(this).val(), $(this).children('[value="' + $(this).val() + '"]').attr('data-bc'), $(this).children('[value="' + $(this).val() + '"]').attr('data-price'), {}, {})
                        );
            else
                updatePrice(order.getPrice().toFixed(2));
        });

$("#cp").chosen({disable_search_threshold: 10, width: "245px"});
        $('#cp').on('change', function () {
            if ($("#cp").val() != -1) {
                // Removing all none centos from OS
                $("#os option").each(function ()
                {
                    if ($(this).val() != -1)
                    {
                        if ($(this).text().toLowerCase().indexOf("centos") == -1)
                            $(this).remove();
                    }
                });
                $('#os').val('-1');
                $('#os').trigger('change');
                $('#os').trigger("liszt:updated");

                $('#cp_chzn .chzn-single span').css("color", "#444444");
            }
            else {
                // Remove all but first
                $('#os option:gt(0)').remove();
                // Add all default OS
                $.each(os_arr, function (i, elem) {
                    $("#os").append('<option data-price="0.00" value="' + elem['id'] + '">' + elem['name'] + '</option>');
                });
                $('#os').val('-1');
                $('#os').trigger('change');
                $('#os').trigger("liszt:updated");

                $('#cp_chzn .chzn-single span').css("color", "#8d9aab");
            }
        });

        ...
        });

这是我手动更改第一个选择框中的值时的图像，一切正常。

这是 ajax 调用后的图像，当再次加载 html 时。在图像中您可以看到第一个选择框选择值是灰色的，而在第一个图像中该值是黑色的，所以我的想法是，在 ajax 调用值之后，$('#cp').trigger('change'). 不受影响，在第二个选择框中您可以看到还有更多选项，这意味着未过滤值。

我在其他人建议的帖子中尝试了很多东西，但它不起作用。 我刚刚在控制台窗口中测试了一些代码，它的工作原理是这样的：

$('#cp').change();
$('#cp').on('change', function () {
        $('#cp').val('129');
    });

但是当我将它添加到我的页面代码时它不起作用。

这些也不起作用：

$('#cp').trigger('change');
$('#cp').trigger("liszt:updated");

更新

问题解决了。 $('#cp').val('<?php echo $_GET['cp']; ?>').trigger("change");这个函数需要在文档准备函数的底部。

Answer 1

尝试使用附加到页面部分的委托事件处理程序不会更改：

$(document).on('change', '#cp', function () {
    $('#cp').val('129');
});

委托事件通过侦听冒泡到不变的祖先的事件来工作。 document 是默认值，如果没有什么方便/更接近。 然后 将 jQuery 选择器应用于气泡链中的元素。它然后为引起事件的任何匹配元素调用函数。这意味着元素不必在事件发生之前匹配，而不是在事件处理程序创建时匹配。

注意：不要将'body' 用于委托事件，因为样式会导致主体的高度为0，并且可能不会发生事件！始终使用 document 作为后备。