Why isn't my jQuery event listener working in Jira?

Other Questions Jira
1

I’m having trouble with Jira customization. I added a change event listener to a custom field, but it’s not working as expected. Here’s what I’m trying to do:

I want to update the built-in version field when my custom field changes. But the code never runs. Here’s what I’ve got:

$(document).ready(function() {
  $('#myCustomField').on('change', function() {
    console.log('Field changed');
    $('#versionField').val($('#myCustomField option:selected').val());
    console.log($('#myCustomField option:selected').val());
  });
});

The console logs never show up. My custom field (myCustomField) is a single version picker, and versionField is the built-in Affected Version(s) field.

I’m doing this because I want to limit users to one version, but I’m not sure how to add conditions to the built-in field. Many plugins use this field, so I need to keep it updated somehow.

Any ideas why the event listener isn’t working? Or is there a better way to achieve this in Jira?

2

I’ve been down this road before with Jira customizations. The tricky part is that Jira’s DOM can be quite finicky, especially with dynamically loaded content. Here’s what worked for me:

Instead of using jQuery, I switched to Atlassian’s AJS library. It’s more reliable in the Jira environment. Try something like this:

AJS.toInit(function() {
AJS.$(document).on(‘change’, ‘#myCustomField’, function() {
var selectedValue = AJS.$(this).val();
AJS.$(‘#versionField’).select2(‘val’, selectedValue);
});
});

This approach uses event delegation and the AJS.toInit function to ensure the code runs at the right time. Also, note the use of select2 for updating the version field - it’s often used for Jira’s select inputs.

If this doesn’t work, double-check your field IDs and make sure your script is loading properly. Sometimes, Jira’s caching can also cause issues, so try clearing your browser cache if you’re still having trouble.

3

The issue you’re encountering is likely due to Jira’s dynamic content loading. Standard jQuery event listeners often don’t work as expected in Jira because elements are frequently replaced or updated asynchronously.

Instead, try using Jira’s built-in events or AJS.$(document).on() for delegation. Here’s an adjusted approach:

AJS.$(document).on('change', '#myCustomField', function() {
    var selectedVersion = AJS.$(this).val();
    AJS.$('#versionField').val(selectedVersion).trigger('change');
});

This should be more reliable. Also, ensure your script runs after the DOM is fully loaded, perhaps in the ‘jira.loaded’ event. If you’re still facing issues, check if your custom field ID is correct and if you have the necessary permissions to modify the version field programmatically.

4

hey, i’ve had similar issues. jira is tricky. try using AJS for better event delegation. use AJS.toInit(function(){ AJS.$(document).on(‘change’, ‘#myCustomField’, function(){ AJS.$(‘#versionField’).val(AJS.$(this).val()).change(); }); }); hope it helps!