Question

我的设置：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>

正如@fehays指出的那样，我希望锚点在可选择的li内部表现得像锚一样。我想我应该能够在这段代码中做到这一点，但我不知道究竟是什么

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

Answer 1

您可以向使用javascript打开正确页面的锚标记添加点击事件。

http://jsfiddle.net/fehays/UUEwd/

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

JS：

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

});

Answer 2

选择良好只能选择li，而你只有一个，所以它不会像你构建HTML那样工作。如果你把每个元素放在它自己的li中，那么你可以单独选择每个元素。我添加了CSS，因此您可以告诉我们：http://jsfiddle.net/sEkPP/

jQuery UI可选小部件

2 个答案: