.click（）の代わりに.toggle（）をトリガする関数を使用する

Question

パラメータをとり、.toggle（）イベントに渡すことができる単純な関数を作成しようとしています。このページには、数百の個別トグルイベントが含まれています。これらのすべてのイベントを処理する関数が1つ必要です。

function toggleVehicles(partId) { 
$("#"+partId+"vehicles").fadeToggle('fast'); 
} 

関数は、テーブルの行をクリックすると呼び出されます。

<tr id="<? echo $id; ?>Control" onClick="showVehiclesbyPart(<? echo $id; ?>); toggleVehicles(<? echo $id; ?>)" class="list"> 

機能showVehiclesbyPartは、ここで問題になっている機能が続いAJAXデータの収集、です。

この機能は機能しますが、最初にクリックするとトグルが正しく実行されません。即座に外に出て戻っているかのように見えます。それに続くクリックはdivを正しく切り替えるでしょう。

私は同様の問題に関する他の記事を調べました。バインディングについても言及しました。私はjQueryとJavascriptの新機能です。私はおそらく簡単な修正だと感じるものを見つけることができません。

ページはhttp://www.partsconsign.comにあります。カテゴリを展開し、部品番号レコードをクリックして問題を確認します。

Answer 1

あなたの問題は、車両部品を表示するテーブル行が最初に表示されることです。これらの行は、ページのロードにdisplay: none;に変更

display: none; 

に

display: table-row; 

彼らが最初にクリックされているときに、彼らはされます：あなたが最初の時間をクリックすると、それはから切り替わり、その後、データをロードします表示するかどうかを非表示に切り替えます。

Answer 2

これは少し遅れていますが、以下はjQueryイベントハンドラメソッドの使用を考えたときの考え方です。私は自分の方法に応じていくつかの変更を行いましたが、cellpaddingとcellspacingをショートカットとして使ってテーブルを簡単に表示しました（ほとんどの場合、これらの属性は実際には使用しません）。

基本的なerror要素（$err）が作成されていますが、最初にクリックしたときにクリックした行の後にクローンして追加します。次に、tr.errを$(this).next('.err')を使用して切り替えます。

これは、あなたが持っているようなインラインイベントハンドラよりもはるかに簡単です。

HTML

<div class="parts-list"> 
    <h1 class="link" id="filtersControl">FILTERS</h1> 
    <table class="list" width="100%" cellspacing="1" cellpadding="1" border="1">  
     <tr> 
      <th class="first" width="128" scope="col">FA PART#</th> 
      <th width="213" scope="col">MOTORCRAFT# (FORD#)</th> 
      <th width="226" scope="col">DESCRIPTION</th> 
      <th width="87" scope="col">ON-HAND</th> 
      <th width="107" scope="col">USE:</th> 
     </tr> 
     <tr id="110Control" class="list"> 
      <td class="first alt link"></td> 
      <td class=" alt link"><a href="#">(2C2Z1107BA)</a></td> 
      <td class=" alt link"><a href="#">WHEEL STUD </a></td> 
      <td class=" alt link"><a href="#">5</a></td> 
      <td class=" alt link"> 
       <input name="110" type="text" id="110" size="3" maxlength="2" /> 
      </td> 
     </tr> 
     <tr id="109Control" class="list"> 
      <td class="first link"></td> 
      <td class=" link"><a href="#">(2C2Z1012AA)</a></td> 
      <td class=" link"><a href="#">WHEEL NUT </a></td> 
      <td class=" link"><a href="#">5</a></td> 
      <td class=" link"> 
       <input name="109" type="text" id="109" size="3" maxlength="2" /> 
      </td> 
     </tr> 
    </table> 
</div> 

CSS

.parts-list { 
    border: 1px solid #86BBD2; 
    background: #CEE7EE; 
} 
.parts-list h1 { 
    margin: 0; 
    padding: 4px; 
    font: sans-serif; 
    font-size: 1em; 
    font-weight: normal; 
    color: #acacac; 
} 
.parts-list table.list { 
    display: none; 
} 

Javascriptを

$(document).ready(function(){ 
    var $partslist = $('.parts-list'), 
     cols = $partslist.find('table.list tr td').length, 
     $err = $('<tr><td>'); 

    $err.addClass('err') 
     .find('td') 
     .attr('colspan', cols) 
     .text('This part does not fit any vehicles in your fleet.') 
     .click(function(){ 
      $(this).toggle(); 
      return false; 
     }); 

    var toggleOn = function(){ 
     var $this = $(this), 
      $clone; 

     if (!$this.next().is('.err')) { 
      $clone = $err.clone(true); 
      $(this).after($clone); 
     } else { 
      $this.next('.err').show(); 
     } 
    }; 

    var toggleOff = function(){ 
     var $next = $(this).next(); 

     $(this).next('.err').hide(); 
    }; 

    $partslist.find('h1').click(function(){ 
     $(this).siblings('table.list').toggle(); 
    }); 

    $partslist.find('table.list tr').not(':has(th)').toggle(toggleOn, toggleOff); 
}); 

http://jsfiddle.net/kREhM/