如何在jQuery ON方法中绑定多对selector：event

Question

我使用的是jQuery 1.7+最新的.on方法，但未能实现，请帮帮我。

工作Fiddle。

基本上就是我的

HTML

<ul id="sortByRight" >
     <li id="1"><a href="javascript:void(0)">List</a></li>
     <li id="2"><a href="javascript:void(0)">Photo</a></li>
     <li id="3"><a href="javascript:void(0)">Map</a></li>
</ul>

<select name="sort" id="sort"  >
   <option value="1">Recommended</option>
   <option value="2">Price: low to high</option>
   <option value="3">Price: high to low </option>
   <option value="4">Newest</option>
</select>

jQuery代码

$(document).on('change click', 'ul#sortByRight,select#sort', function() { 
               selectedOption = $('select#sort').val();
               whatToShow = $(this).attr('id');
               alert('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);
              }
);

现在我有问题/疑问。

• 我们可以用一个选择器绑定一个事件，即上面的函数应该被称为
     EITHER on change of selectbox 或 on click of ul。

• 如何在data方法中设置.on参数。我试过以下

  $(document).on('change click', 'ul#sortByRight,select#sort',
{ selectedOption : $('select#sort').val(), whatToShow : $(this).attr('id') } ,
function(){console.log('selectedOption:'+selectedOption+'whatToShow:'+whatToShow);}
);

  但收到selectedOption is not defined.

的错误

• 我们可以写一些类似$(this, li);的内容，因为我需要 id

• / <>> id 。

• 如果有其他优化解决方案（使用live或bind等功能），请告诉我。

非常感谢。

Answer 1

我不是100％清楚你真正想做什么，但有一件事没有多大意义。您希望在更改选择框时发送LI的ID。哪个李？点击最后一个李？您需要存储活动LI的状态，以便在更改选择框时可以在ajax请求中发送它。

也许是这样的：

$('select#sort').change(function() {
    processAjax();
});


$('ul#sortByRight > li > a').click(function() {
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');

    processAjax();
});

function processAjax() {
    selectedOption = $('select#sort').val();
    whatToShow = $('ul#sortByRight').find('.active').attr('id');
    alert('selectedOption:' + selectedOption + 'whatToShow:' + whatToShow);
}

or check out the jsFiddle