onclick関数はモーダルにあるアイコンでは機能しません

Question

モーダルを持っています。私は操作を実行したいアイコンがあります。 以下はアイコンのクリックイベントで呼び出しているが機能していない私の関数です。

$(document).ready(function() { 
     $(document).on('click', '.fc-day', function() { 
      $('#tmd_schedule').modal('toggle'); 
     }); 
     $(document).on('click', '#add_tmd', function() { 
      console.log("hi"); 
     }); 
}); 

は、ここに私のhtmlコード

<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd"></i> 

Answer 1

..

<i id="add_tmd" class="fa fa-plus pull-right"></i> 

はちょうどあなたのアイコンからform-control-feedbackクラスを削除するというあなたのhtmlを変更し

。 bootstrap cssにはpointer-events: none;という特性があります。だからあなたはアイコンをクリックすることができません。あなたのクリックイベントが右を見ていない添付され

Answer 2

使用セレクタの代わりに、クリックイベントを追加するための文書です。

$(document).ready(function() { 
     $('.fc-day').on('click', function() { 
      $('#tmd_schedule').modal('toggle'); 
     }); 
     $('#add_tmd').on('click', function() { 
      console.log("hi"); 
     }); 
}); 

また、jqueryのクリック機能を使用して少し簡略化することもできます。

$(document).ready(function() { 
     $('.fc-day').click(function() { 
      $('#tmd_schedule').modal('toggle'); 
     }); 
     $('#add_tmd').click(function() { 
      console.log("hi"); 
     }); 
}); 

Answer 3

代わりに$('#add_tmd').click(function() { console.log("hi"); });を試してください。

ドキュメントセレクタを使用することは実際には意味がありません。要素セレクタを使用する方が有効です。さらに、click()関数は​​と同じことを実行しますが、より簡潔です。

Answer 4

クリックは、アイコンの上に追加され

$(document).ready(function() { 
 
     $(document).on('click', '.fa-calendar', function() { 
 
      //$('#tmd_schedule').modal('toggle'); 
 
      console.log("hi"); 
 
     }); 
 
     $(document).on('click', '#add_tmd', function() { 
 
      console.log("hello"); 
 
     }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd"> 
 
</i> 
 
<i class="fa fa-calendar col-md-2 form-control-feedback"></i>

コードスニペットの下に見て、問題があなたのモーダルであるかもしれません。

Answer 5

、

$(document).on('click', '.fa-calendar', function() { 

Answer 6

on機能のためのマニュアルを確認してください。ライブとデリゲート関数を持つjQueryの以前のバージョンは同じ動作をしていました。

$(document).ready(function() { 
 
     
 
     $(document.body).on('click', '#add_tmd', function() { 
 
      alert("hi"); 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<i class="fa fa-plus col-md-2 form-control-feedback" id="add_tmd">Test</i>