CODEWITHSUNDEEP
javascriptphpjqueryhtml
tyro
tyro

Reputation: 1428

Jquery click event fails for button with multiple classes

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?

Upvotes: 0

Views: 37

Answers (4)

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

 $(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>

Upvotes: 0

fab
fab

Reputation: 1249

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

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

Upvotes: 0

user9294275
user9294275

Reputation:

please try this.

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

Upvotes: 0

Ahmad
Ahmad

Reputation: 12717

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 
  });

Upvotes: 1

Related Questions