jqueryui可选小部件

我的设置：jQuery 1.6.2，jQuery UI 1.8.15

我得到了可选择的交互来工作，但不幸的是元素本身中的锚没有激活。下面是我正在使用的代码片段

<ul id="selectable">
  <li>John Doe
      <br/>(111) 222-3333
      <br/><a href="mailto:john.doe@blah.com">john.doe@blah.com</a>
      <br/>
        <a href="/comments?user=15">3 comments</a>
        <br/>
      <br/>
      <a href="/users/15/edit">Edit</a>    
      <a href="/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>
  <li>Jane Smith
      <br/>(222) 333-4444
      <br/><a href="mailto:jane.smith@blah.com">jane.smith@blah.com</a>
      <br/>
        <a href="/comments?user=17">1 comment</a>
        <br/>
      <br/>
      <a href="/users/17/edit">Edit</a>
      <a href="/users/17" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>
</ul>

无名氏

（111）222-3333










简·史密斯

（222）333-4444

正如@fehays所指出的，我希望锚点的行为就像可选择li中的锚点一样。我想我应该能够在这段代码中做到这一点，但我不知道具体是什么

<script>
$(function() {
    $( "#selectable" ).selectable({
      selected: function(ev, ui) {
      //insert code here?
    }
    });
});
</script>

$（函数（）{
$（“#可选”）。可选({
所选：功能（电动汽车、用户界面）{
//在这里插入代码？
}
});
});

Well Selective只能选择li，而您只有一个，因此它不会像您构建HTML的方式那样工作。如果将每个元素放在它自己的li中，则可以单独选择每个元素。我添加CSS只是为了让你知道发生了什么：

Well Selective只能选择li的，而你只有一个这样它就不会像你构建HTML那样工作。如果将每个元素放在它自己的li中，则可以单独选择每个元素。我添加CSS只是为了让您知道发生了什么：

您可以向锚定标记添加一个单击事件，该事件使用javascript打开正确的页面

---

您可以向锚定标记添加一个单击事件，该事件使用javascript打开正确的页面

---

---

您可以使用过滤器选项选择除“li”之外的元素。实际上，单个元素也可以工作，我可以看到它被选中，所以这不是问题所在，让我看看您的CSS。我将更新我的示例，以便更清楚可选的级别。@Jason，我认为OP想要的是锚在可选li中的行为就像锚一样。是的@fehays，这正是我想要的。是的，我也尝试过过滤器选项。我试着在一个span中使用名称，例如“John Doe”，在span上使用过滤器，但是锚仍然不能像锚一样工作。你可以使用过滤器选项选择除“li”之外的元素。实际上单个元素也可以工作，我可以看到它被选中，所以这不是问题，让我看看你的CSS。我将更新我的示例，以便更清楚可选的级别。@Jason，我认为OP想要的是锚在可选li中的行为就像锚一样。是的@fehays，这正是我想要的。是的，我也尝试过过滤器选项。我试着在一个span中使用名称，例如“John Doe”，并在span上使用过滤器，但锚点仍然不能像锚点那样工作。嗯，在您的示例中它起作用，但我没有想到，我注意到您没有添加任何可选的CSS，这可能是原因吗？我在JSFIDLE中添加了CSS，它似乎仍然可以工作。mb你的代码中有什么其他原因导致了它？我的错，我一定是复制了一些错误的东西，它现在工作得很好，谢谢你是一个摇滚明星！另一个问题是，带有JS确认的删除不再正常工作，它不会显示确认对话框，如果您有任何想法，我将不胜感激。谢谢。我用一些未经测试的代码更新了示例。我不太清楚你的数据方法是如何工作的。但我想你能理解。基本上，只需检查这些数据元素，并根据您发现的内容执行一些操作。嗯，在您的示例中它起了作用，但没有记住，我注意到您没有添加任何可选的CSS，这可能是原因吗？我将CSS添加到JSFIDLE中，它似乎仍然有效。mb你的代码中有什么其他原因导致了它？我的错，我一定是复制了一些错误的东西，它现在工作得很好，谢谢你是一个摇滚明星！另一个问题是，带有JS确认的删除不再正常工作，它不会显示确认对话框，如果您有任何想法，我将不胜感激。谢谢。我用一些未经测试的代码更新了示例。我不太清楚你的数据方法是如何工作的。但我想你能理解。基本上只需检查这些数据元素，并根据您发现的内容做一些事情。

<ul id="selectable">
  <li>John Doe
      <br/>(111) 222-3333
      <br/><a href="mailto:john.doe@blah.com">john.doe@blah.com</a>
      <br/>
      <a href="/comments?user=15">3 comments</a>
        <br/>
      <br/>
      <a href="/users/15/edit">Edit</a>

      <a href="/users/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a>
    <hr/>
  </li>

</ul>

$(function(){

    $('#selectable').selectable({
        selected: function(ev, ui) {
         //maybe do something
        }
    });

    $('#selectable li a').click(function(){     
         var url = $(this).attr('href');

         if ($(this).data('confirm')) {
            var answer = confirm($(this).data('confirm'));
            var method = $(this).data('method');
            if (method && answer) {
                // execute method?
                // do redirect?
                window.location = url; 
            }
         } else {
            window.location = url;             
         }
    });

});