2

私はプロジェクトにAcuitySchedulingを使用しています。これはprototype.jsを使用しており、ページのヘッドとフッターに独自のカスタムコードを追加できます（iframeを介してサイトに提供されます）。私はprototype.jsに精通していないので、競合しない方法でjQueryを実行しようとしています。これまでのところ、私はうまく機能することさえできていませんalert()。このページでjQueryを使用できるようにするにはどうすればよいですか？

ここで私のiframeのコンテンツを見ることができます：https ：//acuityscheduling.com/schedule.php？owner = 11134756

ソースを表示すると、下部に追加したコードが表示されます。

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript">
  jQuery.noConflict();

  jQuery(document).ready(function(){
    jQuery('.time-selection').click(function() {
      jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>');  
    });
  });
</script>

他のライブラリでのjQueryの使用に関するすべてのjQueryドキュメントを読み、うまくいくと思われる例を試しました。上記のコードでは、を使用せずに試してみました。上記のコードでは、を使用しているのではなく、jQuery.noConflict();を使用しているためです。$jQuery

これについて提供できる洞察に感謝します！

4

1 に答える 1

1

私の今のお気に入りのjavascriptデバッガーはchromeです。Chromeでサイトを見ると、jQuery('.time-selection');jquery.ready（）中に結果が返されないことがわかりました。これは、時間選択ラジオボタンにクリックハンドラーが実際に追加されていないことを意味します。

予定の種類と日付を選択し、ラジオボタンが画面に表示されると、jQuery('.time-selection');すべてのボタンが返されます。この時点で、javascript consolueウィンドウを使用してイベントを手動で追加しました。ラジオボタンがクリックされたときに、ウィンドウの下部にテキストメッセージが正しく追加されました。

したがって、現時点ではライブラリ間で競合が発生しているとは思いません。問題は、まだ作成されていないアイテムにイベントを追加できないことです。

幸い、JQueryには解決策があるようです。 .on（）イベントハンドラーを使用すると、まだ作成されていないアイテムのイベントハンドラーを指定できます。このコードを試してみてください：

<script language="javascript">
  jQuery.noConflict();

  jQuery(document).ready(function(){
     jQuery('body').on('click', '.time-selection', function() {
        jQuery('#rest').append('<p class="continueAlert">Please enter your name and contact info below.</p>');  
     });
  });
</script>

.time-selectionアイテムが作成されると、このイベントハンドラーがそれらに適用されます。

注： Acuityscheduling.comにはhttps経由でアクセスする必要があります。jqueryライブラリのURLはhttpsではなくhttpを使用しているため、Chromeで安全でないコンテンツの警告が表示されます。ブラウザがjqueryライブラリを完全に拒否している可能性があります。

Googleはhttpsもサポートしているので、代わりにhttpsを使用することをお勧めします。変化

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

に

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

トリックを行う必要があります。

于 2012-09-14T16:31:54.677 に答える