7

Jquery ContentPanelSwitcherと呼ばれるJqueryプラグインを使用しています。タイトルの内容を正確に実行し、divを簡単に切り替えます。このページのHTMLは次のとおりです。

<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>

<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>

<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>

各コンテンツパネルにはフォームがあります。各フォームには表があります。

<table class="table table-hover" data-controller="rank">
  <thead>
    <tr>
      <th colspan="4" align="left"><h2>Rank 1</h2></th>
    </tr>
    <tr>
      <th>Number</th>
      <th>Requirements</th>
    </tr>
  </thead>
  <tbody>
    <tr data-name="one_li">
      <td>1</td>
      <td>Info</td>
    </tr>
    <tr data-name="two_li">
      <td>2</td>
      <td>More Info</td>
      </td>
    </tr>
  </tbody>
</table>

行がクリックされた場合にアクションを実行しようとしています。これが私が使用しているjavascriptです：

$(document).ready(function(){
  $('#switcher-panel form table tbody tr').click(function(){
     console.log("Clicked");
   });
});

$('#switcher-panel form table tbody tr')ChromeコンソールでのJqueryセレクターを使用すると、テーブルが検出され、すべてが正常に表示されます。javascriptファイルに入れても何も起こりません。いくつかの方向性は素晴らしいでしょう。助けてくれてありがとう。

4

2 に答える 2

12

これは機能します：

$('#switcher-panel').on('click', 'table tr', function() {
    console.log("Clicked", this);
});

例

これにより、クリックされた子がセレクターに該当する場合に、子のイベント#switcher-panelをリッスンするリスナーがに追加されます。click'table tr'

イベントの委任の詳細については、この記事を確認してください。（イベント委任の場合はCtrl + f）

于 2012-11-22T14:37:07.337 に答える
3

パネルのコンテンツが動的に追加される場合は、クリックイベントを静的な親要素に委任する必要があります。これを試して：

$('#switcher-panel').on('click', 'form table tbody tr', function(){
    console.log("Clicked");
});

私の推測では、子セレクターも短くすることができtable trます。

于 2012-11-22T14:35:59.120 に答える