jquery - 使用 jQuery 模拟 AJAXy 单击以选择菜单

Question

我仔细观察了周围，我认为我已经很接近了，但我真的很挣扎。

我们有一个页面通过 AJAX 提取内容来填充下拉菜单。

您从一个下拉菜单开始，您选择的内容将占据下一组等。

我希望能够通过稍后菜单之一中的链接单击(即最初不可见)在下拉列表中选择一个选项，并且我发现由于 AJAX，存在一些 jQuery 绑定(bind)奇怪的情况，但我可以不知道如何做到这一点。

我的 html(这里的选择列表在 AJAX 填充之前并不存在)

<form>
<select name="myList">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>
<a href="javascript:void(0)" id="option1">Select option 1</a>
<a href="javascript:void(0)" id="option2">Select option 2</a>
<a href="javascript:void(0)" id="option3">Select option 3</a>
</form>

我的jq:

$('#option1').click(function() {
    $('select[name=myList] option[value=1]').attr('selected', 'selected');
});
$('#option2').click(function() {
    $('select[name=myList] option[value=2]').attr('selected', 'selected');
});
$('#option3').click(function() {
    $('select[name=myList] option[value=3]').attr('selected', 'selected');
});

现在，这可以用于选择选项，但它不会模拟我需要的鼠标单击(出于某种原因)，这是显示下一个内容所必需的(即，不仅仅是选择正确的选项，它必须被点击。我的意思是，我得到了 onClick 事件来触发，但这仍然无法加载下一个内容。遗憾的是我无法改变这一点:/)。

我尝试在这里实现一些东西 http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

但没有取得任何成功。感谢您的任何想法。

Answer 1

您总是可以自己模拟点击吗？尽管这是您想要的更改事件，但只需执行以下操作:

演示:http://jsfiddle.net/xsP2A/

$('#option1').click(function() {
    $('select[name=myList] option[value=1]').attr('selected', 'selected');
    $('select[name=myList]').change();
});
$('#option2').click(function() {
    $('select[name=myList] option[value=2]').attr('selected', 'selected');
    $('select[name=myList]').change();
});
$('#option3').click(function() {
    $('select[name=myList] option[value=3]').attr('selected', 'selected');
    $('select[name=myList]').change();
});