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'/>

然后，您可以像这样检索该数字：

$(".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

您的HTML无效，按钮元素必须包含结束标记：

<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);
  }
}

如何减少jquery中按钮的事件监听器数量？

3 个答案: