Bootstrap modal relatedTarget is undefined

Question

I am trying to get the clicked element using the property relatedTarget of the show.bs.modal event. It's always getting undefined though.

This is what I have:

  $("#curCarSelect").on('click', function(e) {
    $("#curCarModal").on('show.bs.modal', function(event) {
      modalOpenedby = event.relatedTarget; 
      alert(modalOpenedby);
    }).modal('toggle');
  });

Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else — Daniel Cheung, Oct 12 '14 at 12:53

score 49 · Accepted Answer · answered May 06 '15 at 16:20

49

try:

$("#curCarSelect").on('click', function(e) {
   $modal.modal('toggle', $(this));
});

where $modal is your modal element to open, then:

$modal.on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget) // Button that triggered the modal
})

answered May 06 '15 at 16:20

Antonio

516
6
7

1

This should be the accepted best answer. The currently "best" one is useless. – Mike Feng Jan 08 '17 at 14:09
Undefined elements when accessing the event object – Bao Thai Apr 17 '17 at 06:26
This should be in bootstraps documentation. – Augustas Jul 11 '19 at 12:52

score 5 · Answer 2 · answered Mar 27 '17 at 05:18

If you need to use event.relatedTarget in you dynamically opened modal then you can pass the target as a second argument in the modal function.

$("#curCarSelect").on('click', function(e) {
    $("#curCarModal").modal('toggle', $("#curCarSelect")); 
});

score 2 · Answer 3 · answered Oct 03 '14 at 23:48

2

Per the documentation:

If caused by a click, the clicked element is available as the relatedTarget property of the event.

But you're just calling .modal('toggle'). That doesn't involve any click event, hence why relatedTarget in undefined in your case.

answered Oct 03 '14 at 23:48

cvrebert

9,075
2
38
49

1

Can you post code that **does** involve the click event, so that `relatedTarget` is **not** undefined? I am trying to learn this really bad and a working example on grounds of BS 3.2.2 would be ace! Thank you ;) – lowtechsun Mar 14 '15 at 12:56
2

It will be defined when you use `data-toggle="modal"` – cvrebert Mar 15 '15 at 05:46
@lowtechsun, you able to figure this out? – user1149244 Apr 10 '17 at 04:38
@user1149244 I have moved away from bootstrap a long long time ago and quite possibly won't ever touch that. Look into [Susy](http://susy.oddbird.net/) or [Ant](https://github.com/corysimmons/postcss-ant) if you will, just a suggestion. For a solution check [this answer](http://stackoverflow.com/a/30082273/1010918), it should work just fine. – lowtechsun Apr 10 '17 at 10:39

score 0 · Answer 4 · answered Feb 06 '15 at 22:22

0

I make it worked for me. Try this:

$("#curCarSelect").on('click', function(e) {
    $("#curCarModal").on('show.bs.modal', function(event) {
        modalOpenedby = event.relatedTarget; 
        alert(modalOpenedby);
    }).modal('toggle', e);
});

answered Feb 06 '15 at 22:22

stasionok

11
1

score 0 · Answer 5 · edited Sep 01 '15 at 00:51

Workaround for this worked for me on bootstrap 2:

$("a[data-toggle='modal']").on('click', function(e) {
    $_clObj = $(this); //clicked object
    $_mdlObj = $_clObj.attr('data-target'); //modal element id 
    $($_mdlObj).on('shown.bs.modal',{ _clObj: $_clObj }, function (event) {
           $_clObj = event.data._clObj; //$_clObj is the clicked element !!!
           //do your stuff here...
    });
});

score -2 · Answer 6 · answered Oct 03 '14 at 22:11

-2

try this:

$('#curCarModal').on('shown.bs.modal', function () {
    modalOpenedby = event.relatedTarget; 
});

$("#curCarSelect").on('click', function(e) {
    $("#curCarModal").modal('toggle'); 
    alert(modalOpenedby);
});

answered Oct 03 '14 at 22:11

Fergoso

1,584
3
21
44

event is automatically passed in chrome browser this might fail in browsers where the event is not automatically passed like in Firefox. – Naseeruddin V N Oct 04 '18 at 08:14

Bootstrap modal relatedTarget is undefined

6 Answers6

Linked