Jquery click event fails for button with multiple classes

Question

I have a form with button as follows. Here click event is not triggered.

<form role="form" method="POST" id="exportform" action="{{ route('export_pdf') }}">
  <input type="checkbox"  name="dataoption[]" id="filled-in-box5" value="1"  />
  <input type="checkbox"  name="dataoption[]" id="filled-in-box7" value="2"/>
  <button type="button" class="btn-floating pdf-btn page"><i class="material-icons">picture_as_pdf</i></button>
</form>


<script type="text/javascript">

   $(document).on('click',"[type='button'][class='page']",function(){
      // do action 
  });
</script>

But when I change the code as

 $(document).on('click',".page",function(){
      // do action 
  });

or as

<button type="button" class="page"><i class="material-icons">picture_as_pdf</i></button>

$(document).on('click',"class['page']",function(){
          // do action 
      });

it works. But I need to check both type and class to fire action. Why is this not possible when multiple classes exist? How can I make it work?

Ahmad · Accepted Answer · 2018-02-01 07:35:12Z

1

Here is what you need to type to make it trigger the class and the type

$(document).on('click',".page[type=button]",function(){
      // do action 
  });

answered Feb 1, 2018 at 7:35

Ahmad

12.8k7 gold badges53 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user9294275 · Accepted Answer · 2018-02-01 07:35:31Z

0

please try this.

$(document).ready(function(){
     $(".page[type='button']").click(function(){
     alert('clicked');
   })
 });

answered Feb 1, 2018 at 7:35

user9294275

Comments

fab · Accepted Answer · 2018-02-01 07:36:36Z

0

In your case it's easier to use the action listener like this:

$('.page').on('click',function(){
     // do action 
});

answered Feb 1, 2018 at 7:36

fab

1,27914 silver badges24 bronze badges

Comments

Saurabh Mistry · Accepted Answer · 2018-02-01 07:39:06Z

0

 $(document).on('click',".page[type='button']",function(){
     alert("working..");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="POST" id="exportform" action="{{ route('export_pdf') }}">
  <input type="checkbox"  name="dataoption[]" id="filled-in-box5" value="1"  />
  <input type="checkbox"  name="dataoption[]" id="filled-in-box7" value="2"/>
  <button type="button" class="btn-floating pdf-btn page"><i class="material-icons">picture_as_pdf</i></button>
</form>

answered Feb 1, 2018 at 7:39

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

Collectives™ on Stack Overflow

Jquery click event fails for button with multiple classes

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related