QueryBuilder.rulesChanged Event won't fire

[LEarwax]

I see that the documentation was made clearer in terms of describing the namespace. However, I still cannot get the rulesChanged event to fire.

My code is fairly straightforward.

$("#builder-basic").on('QueryBuilder.rulesChanged', (e) => { console.log("Event: ", e); });

So when the value of the select option for the rule changes, I need the event to fire so I can grab the value and make the appropriate call to the server to fetch values. When I try this, I get nothing.

[LEarwax]

For additional context, I'm initializing the builder thusly:

`var rules_basic = { condition: 'AND', rules: [{ id: 'price', operator: 'less', value: 10.25 }, { condition: 'OR', rules: [{ id: 'category', operator: 'equal', value: 2 }, { id: 'category', operator: 'equal', value: 1 }] }] };

$('#builder-basic').queryBuilder({
  plugins: ['bt-tooltip-errors'],

  filters: [{
    id: 'name',
    label: 'Name',
    type: 'string'
  }, {
    id: 'category',
    label: 'Category',
    type: 'integer',
    input: 'select',
    values: {
      1: 'Books',
      2: 'Movies',
      3: 'Music',
      4: 'Tools',
      5: 'Goodies',
      6: 'Clothes'
    },
    operators: ['equal', 'not_equal', 'in', 'not_in', 'is_null', 'is_not_null']
  }, {
    id: 'in_stock',
    label: 'In stock',
    type: 'integer',
    input: 'radio',
    values: {
      1: 'Yes',
      0: 'No'
    },
    operators: ['equal']
  }, {
    id: 'price',
    label: 'Price',
    type: 'double',
    validation: {
      min: 0,
      step: 0.01
    }
  }, {
    id: 'id',
    label: 'Identifier',
    type: 'string',
    placeholder: '____-____-____',
    operators: ['equal', 'not_equal'],
    validation: {
      format: /^.{4}-.{4}-.{4}$/
    }
  }],

  rules: rules_basic
});

$('#btn-reset').on('click', function() {
  $('#builder-basic').queryBuilder('reset');
});

$('#btn-set').on('click', function() {
  $('#builder-basic').queryBuilder('setRules', rules_basic);
});

$('#btn-get').on('click', function() {
  var result = $('#builder-basic').queryBuilder('getRules');

  if (!$.isEmptyObject(result)) {
    alert(JSON.stringify(result, null, 2));
  }
});`

[mistic100]

I don't know which documentation you read
https://querybuilder.js.org/#events

You will see the correct naming is rulesChanged.queryBuilder not QueryBuilder.rulesChanged

---

For further reference please create a jsfiddle where the problem can be seen

[NickCTLVR]

For whatever reason, I was trying the syntax you mentioned and was having no luck. In any case, it worked. Thank you.