Question

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

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

它有效。但是我需要检查类型和类以解除操作。当存在多个类时，为什么这不可能？我怎样才能使它发挥作用？

Answer 1

您需要键入以使其触发类和类型

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

Answer 2

请试试这个。

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

Answer 3

在您的情况下，使用动作监听器更容易：

NextPart

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

对于具有多个类的按钮，Jquery单击事件失败

4 个答案: