具有多个类的按钮的 Jquery 单击事件失败答案

【问题标题】：Jquery click event fails for button with multiple classes具有多个类的按钮的 Jquery 单击事件失败
【发布时间】：2018-02-01 07:31:18
【问题描述】：

我有一个带有按钮的表单，如下所示。这里没有触发点击事件。

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

但是当我将代码更改为

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

或作为

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

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

它有效。但是我需要同时检查类型和类来触发动作。当存在多个类时，为什么这是不可能的？我怎样才能让它发挥作用？

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

这是您需要输入的内容以使其触发类和类型

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

【讨论】：

【解决方案2】：

请试试这个。

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

【讨论】：

【解决方案3】：

在你的情况下，像这样使用动作监听器会更容易：

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

【讨论】：

【解决方案4】：

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

【讨论】：