javascript - 触发选择事件

Question

我正在使用我的代码从服务器获取数据并显示带有输入和标签的数据。

我唯一的问题是，当我进入页面时，选择更改没有被触发，因此我没有得到任何数据。 让它起作用的唯一方法是选择另一个选项并再次选择相同的选项，以便触发更改事件。 $('#selectMRPC').trigger('change');没有帮助。

如何制作我的 selectorMRPC()和 $('#selectMRPC').change在页面加载时执行？

$(document).ready(function () {

    selectorMRPC();
    $('#selectMRPC').trigger('change');

    $('#selectMRPC').change(function () {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');

        $('#paramBody').empty();
        for (var i = 1; i <= 10; i++) {
            var field = mrpc["field" + i];
            if (field !== undefined) {
                var parsedField = field.split('_');
                var value = parsedField[0];
                var type = parsedField[1];

                switch (type) {
                    case  "S":
                        type = "text";
                        if (value === '""')
                            value = null;
                        break;
                    case "B":
                        type = "checkbox";
                        break;
                    case "N":
                        type = "number";
                        value = parseInt(value);
                        break;
                    case "D":
                        type = "number";
                        value = parseInt(value);
                        if (value === '""')
                            value = null;
                        break;
                }
                //else use checkbox
                if(type === "checkbox")
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><div class="checkbox checkbox-primary">' +
                        '<input class="text-center" id="field'+i+'" name="Fields" type="checkbox" value="' +value + '"><label for="field'+i+'"></label></div></tr>');
                }
                else
                {
                    $('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input class="text-center" name="Fields" type="' + type + '" value="' +value + '"></tr>');
                }
            }
        }
    });


    function selectorMRPC() {
        $.ajax({
            type: 'post',
            url: 'IndividualSimulator',
            success: function (result) {
                $('#selectMRPC').empty();
                JSON.parse(result).forEach(function (mrpc) {
                    var option = $('<option>', {
                        value: mrpc.name,
                        text: mrpc.name
                    });

                    //Persist data with option
                    option.data('mrpc', mrpc);

                    $('#selectMRPC').append(option);
                });
            },
            error: function () {

            }
        });
        return false;
    }
});

Answer 1

How can I make my selectorMRPC() and $('#selectMRPC').change be executed when the page loads?

从您的代码和注释来看，顺序似乎如下

• selectorMRPC() 为 option 创建 data-mrpc 属性
• 当 change 事件触发时，它会查找 data-mrpc 属性
• 但是你似乎在 AJAX 成功发生之前触发了 change 事件

如下所示

$(document).ready(function() {
  selectorMRPC(); //notice that only this method is invoked
});

function selectorMRPC() {
  $.ajax({
    type: 'post',
    url: 'IndividualSimulator',
    success: function(result) {
      $('#selectMRPC').empty();
      JSON.parse(result).forEach(function(mrpc) {
        var option = $('<option>', {
          value: mrpc.name,
          text: mrpc.name
        });
        //Persist data with option
        option.data('mrpc', mrpc);

        $('#selectMRPC').append(option);
      });
      $('#selectMRPC').change(function() {
        //fetch data
        var mrpc = $(this).find('option:selected').data('mrpc');
        //rest of the code removed for simplification
      });
      $('#selectMRPC').trigger('change');

    },
    error: function() {

    }
  });
  //return false; this line doesn't make sense
}