What causes "The element you specified could not be found" in Semantic-Org/Semantic-UI?

Verify the selector matches an element before calling 'attach events'.

The element you specified could not be found

Error message

The element you specified could not be found

What it means

Emitted by Modal's attachEvents(selector, event) (modal.js:200) when the given selector matches zero elements — there is nothing to bind the show/hide toggle to. It is a console.error (modal.js:822), not thrown.

Source

Thrown at src/definitions/modules/modal.js:1022

  // called after hide animation
  onHidden   : function(){},

  // called after approve selector match
  onApprove  : function(){ return true; },

  // called after deny selector match
  onDeny     : function(){ return true; },

  selector    : {
    close    : '> .close',
    approve  : '.actions .positive, .actions .approve, .actions .ok',
    deny     : '.actions .negative, .actions .deny, .actions .cancel',
    modal    : '.ui.modal'
  },
  error : {
    dimmer    : 'UI Dimmer, a required component is not included in this page',
    method    : 'The method you called is not defined.',
    notFound  : 'The element you specified could not be found'
  },
  className : {
    active     : 'active',
    animating  : 'animating',
    blurring   : 'blurring',
    inverted   : 'inverted',
    legacy     : 'legacy',
    loading    : 'loading',
    scrolling  : 'scrolling',
    undetached : 'undetached'
  }
};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

Verify the selector matches an element before calling 'attach events'.
Attach events after the trigger element is in the DOM.
Bind manually instead: $('#btn').on('click', () => $('.ui.modal').modal('show')).

Example fix

// before
$('.ui.modal').modal('attach events', '#opn'); // typo -> notFound
// after
$('.ui.modal').modal('attach events', '#open');

Defensive patterns

Strategy: validation

Validate before calling

// Verify the trigger selector matches before attaching modal events.
function attachModalTrigger($modal, selector){
  if ($(selector).length === 0) {
    throw new Error('Modal trigger not found for selector: ' + selector);
  }
  $modal.modal('attach events', selector);
}

Prevention

Confirm the trigger element exists in the DOM before 'attach events'.
For late-rendered triggers, bind manually: $('#btn').on('click', () => $modal.modal('show')).
Prefer stable selectors (id) over fragile CSS paths.

When it happens

Trigger: $('.ui.modal').modal('attach events', '#nonexistent') where '#nonexistent' matches nothing at call time.

Common situations: Wrong/typo selector for the trigger button, trigger element rendered after modal init (AJAX/SPA), selector scoped outside where jQuery looks.

Related errors

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/09ba6f5e2a57c513. Report an issue: GitHub.