jqueryのボタンのイベントリスナーの数を減らすにはどうしたらいいですか？

Question

jquery 1.6.2を使用しています。

は基本的に私のページのいずれかで、私は次のようになります構造：

<div id="section1"> 
    <fieldset> 
     <ul> 
      <li> 
      <input type="radio" name="1" value="">blah 1</input></li> 
      <li> 
      <input type="radio" name="1" value="" checked="checked"> 
      blah 2</input> 
      </li> 
      <li> 
      <input type="radio" name="1" value="">blah 3</input> 
      </li> 
     </ul> 
     <div> 
      ....snipped... 
      <button type='submit' id='button1'/> 
     </div> 
    </fieldset> 
</div> 

をそして、私は100の、そのような構造を持っているので、私はこれに相当するイベントハンドラを100個持っています：

var name = "1"; 
$('#button1') 
    .parent().parent() 
    .find("input:radio[name='" + name + "']") 
    .filter(':checked') 
    .attr('value'); 

イベントリスナーを使って簡単にする方法はありますか？

Answer 1

通常、jQueryでは、イベントリスナーの数を減らすために、.live()または.delegate()を使用します。

Answer 2

このようなすべてのボタンに共通するクラスを追加します。

<button class="submitButton" type='submit' id='button1'/> 

次に、あなたが同じ振る舞いを持つすべてのこれらのボタンにバインドされます。このようなワンクリックハンドラを定義することができます

$(".submitButton").click(function() { 
    // put whatever code you want here for all submit buttons 
}); 

を

どのボタンが押されているのかを知る必要がある場合は、id値を取得してその値を取得できます。

$(".submitButton").click(function() { 
    var num = parseInt(this.id.match(/\d+/)[0], 10); 
    // now you can process the submit knowing the num 
    // is the number at the end of the buttom id 
}); 

それとも、あなたはこのようなボタンの上にデータ項目を入れることができます：

<button class="submitButton" data-num="1" type='submit' id='button1'/> 

そして、あなたはこのようにその番号を取得することができます：あなたのHTMLが無効である

$(".submitButton").click(function() { 
    var num = $(this).data("num"); 
    // now you can process the submit knowing the num 
    // is the number at the end of the buttom id 
}); 

Answer 3

、ボタン要素は持っている必要があります終了タグ：

<div id="section1"> 
    <fieldset> 
     <ul> 
      <li> 
      <input type="radio" name="1" value="">blah 1</input></li> 
      <li> 
      <input type="radio" name="1" value="" checked="checked"> 
      blah 2</input> 
      </li> 
      <li> 
      <input type="radio" name="1" value="">blah 3</input> 
      </li> 
     </ul> 
     <div> 
      ....snipped... 
      <button id='button1' type="submit">click me</button> 
     </div> 
    </fieldset> 
</div> 

は、あなただけのボタンに対応した親のdivにクリックリスナーを付けることができますタイプサブミット：

window.onload = function() { 
    var el = document.getElementById('section1'); 
    el.onclick = handleClick; 
} 

function handleClick(evt) { 
    var evt = evt || window.event; 
    var el = evt.target || evt.srcElement; 

    if (el && el.tagName && el.tagName.toLowerCase() == 'button' && 
     el.type == 'submit') { 
    alert('clicked button with id ' + el.id); 
    } 
}