javascript - get data attribute of a bootstrap modal link - Stack Overflow

admin管理员组

文章数量:1333184

I saw a lot of subject but I still dont have my answer.

Situation : I have a link which open a modal popin

<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe" >
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe" >

and i have my js

$('#myModalAnnexeDe').on('show.bs.modal', function (event) {
     var filtre=$(event.relatedTarget).attr('data-filtre');
     alert($(event.relatedTarget).attr("data-filtre"));
     if(filtre == 'oui'){
         $('.notform').hide();
     }
});

result of the alert is 'undefined'

I also try :

$(event.relatedTarget).attr('data-filtre')
$(event.relatedTarget).data('filtre')
$(event.relatedTarget).data($('a'),'filtre')
$(event.relatedTarget).data(a,'filtre')
$(event.relatedTarget).attr(filtre)
$(event.relatedTarget).attr('filtre')
$(event.relatedTarget).dataset.filtre
$(this).attr("data-filtre")
...

And maybe many others...

about show.bs.modal & event.relatedTarget from bootstrap doc :

show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

thanks in advance.

I saw a lot of subject but I still dont have my answer.

Situation : I have a link which open a modal popin

<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe" >
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe" >

and i have my js

$('#myModalAnnexeDe').on('show.bs.modal', function (event) {
     var filtre=$(event.relatedTarget).attr('data-filtre');
     alert($(event.relatedTarget).attr("data-filtre"));
     if(filtre == 'oui'){
         $('.notform').hide();
     }
});

result of the alert is 'undefined'

I also try :

$(event.relatedTarget).attr('data-filtre')
$(event.relatedTarget).data('filtre')
$(event.relatedTarget).data($('a'),'filtre')
$(event.relatedTarget).data(a,'filtre')
$(event.relatedTarget).attr(filtre)
$(event.relatedTarget).attr('filtre')
$(event.relatedTarget).dataset.filtre
$(this).attr("data-filtre")
...

And maybe many others...

about show.bs.modal & event.relatedTarget from bootstrap doc :

show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

thanks in advance.

• javascript
• bootstrap-modal
• custom-data-attribute

Share Improve this question Follow edited Jul 13, 2017 at 10:17 Vincent asked Jul 13, 2017 at 10:05 VincentVincent 16411 gold badge22 silver badges1414 bronze badges 3

• still the same : alert($(this).attr("data-filtre")); => undefined alert($this); gave me a js object. – Vincent Commented Jul 13, 2017 at 10:15
• I don't feel there is any error in the code you showed above. Please have look to this jsfiddle/ZcLSE/1619 – Pardeep Dhingra Commented Jul 13, 2017 at 10:23
• @Vincent , you could use simple JavaScript method to get attribute value... e.relatedTarget.getAttribute('data-filtre') ... It will give you the value. – Mohal Commented Jan 28, 2018 at 10:07

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It works just fine with your code only. check your jQuery Version patibility with bootstrap version first.

And for the reference purpose I have also provided working code with a simple changes in your code like tag pletion and added bootstrap modal and jquery link.

$('#myModalAnnexeDe').on('show.bs.modal', function (event) {
     var filtre=$(event.relatedTarget).attr('data-filtre');
     alert($(event.relatedTarget).attr("data-filtre"));
     if(filtre == 'oui'){
         $('.notform').hide();
     }
});

<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest piled JavaScript -->
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="pointer" data-filtre='non' data-toggle="modal" data-target="#myModalAnnexeDe">non</a>
<a class="pointer" data-filtre="oui" data-toggle="modal" data-target="#myModalAnnexeDe">oui</a>

<!-- Modal -->
<div id="myModalAnnexeDe" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

I tried again a lot of thing and still didn't work with the show.bs.modal event.

So I just did

$('.lienfiltre').on('click', function (){
  if($(this).attr('data-filtre') === 'oui'){
     $('.notform').hide();
  }
});

and here it's working. ty

本文标签： javascriptget data attribute of a bootstrap modal linkStack Overflow