Question

我有多个列表项，其值属性包含Urls。我正在尝试捕获click on click事件中每个列表项的Url和Text。单击列表项时没有任何反应。

<ul id="expList" class="list">
<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
<ul style="display: none;"><li value="https://hosted.demo.ca/academic/bm">Board Meetings</li><li value="https://hosted.demo.ca/academic/cmtte">Committee</li>
<li value="https://hosted.demo.ca/academic/dm">Document Management</li>
<li value="https://hosted.demo.ca/academic/pm">Project Management</li>
</ul>

JsFiddle使用完整的HTML，如果这有助于http://jsfiddle.net/6yXV6/

我的代码：

site = $('#expList');
site.on('click','li',function(){
  siteUrl =  $(this).attr('value');
  siteName = $(this).text();
  console.log(siteUrl);
  console.log(siteName);
  RefreshSiteLists();
});

我已经使用此代码使此列表展开和折叠，可能会以某种方式发生冲突：

function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
      if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
      }
      return false;
    })
    .addClass('collapsed').children('ul').hide();

        //Create the button functionality
    $('#expandList').unbind('click').click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    });
    $('#collapseList').unbind('click').click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    });
  };

$(function() {
   $("#expList li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

编辑：我想你们大多数人已经回答了我的问题，我的代码中还有其他东西阻止它运行。因此，一旦我缩小了范围，我可能会发布另一个与此相关的问题。

Answer 1

你可以尝试这个，这将获得你点击的这个列表项，并显示该列表中的值和文本。

$("li").click(function(){
    if(this.id != 'myList')
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).text();
        console.log(siteUrl);
        console.log(siteName);
    }

    else
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        console.log(siteUrl);
        console.log(siteName);
    }
    return false;
});

jsFiddle Demo (using console.log)

jsFiddle Demo (using alert)

Answer 2

实际问题在于 html 。更好地验证它。

1）标签关闭不正确

<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
...........

JSFiddle

Answer 3

简而言之，问题是$(this)在点击li时有两个上下文条目，这是因为在另一个内嵌li，你可以看到，如果你这样做了一个console.log($(this))，所以解决方案是添加一个事件限制器：event.stopImmediatePropagation();来阻止这种情况发生，代码将是这样的：

 site = $('#expList');
  site.on('click','li',function(event){
  event.stopImmediatePropagation();
  siteUrl =  $(this).attr('value');
  siteName = $(this)[0].childNodes[0];
  console.log(siteUrl);
  console.log(siteName);
});

顺便说一句，就像@ user1671639说的那样，html结束标签中存在问题，应该是：

    <ul id="expList" class="list">
      <li value="https://hosted.demo.ca" class="collapsed expanded">
        Sharepoint Demo Website
        <ul id='#internal' style="display: block;">
          <li value="https://hosted.demo.ca/academic" class="collapsed active">
            Academic
          </li>
          <li value="https://hosted.demo.ca/academic/bm">Board Meetings</li>
          <li value="https://hosted.demo.ca/academic/cmtte">Committee</li>
          <li value="https://hosted.demo.ca/academic/dm">Document Management</li>
          <li value="https://hosted.demo.ca/academic/pm">Project Management</li>
        </ul>
       </li>
     </ul>

试图获取列表项的值和文本

3 个答案:

JSFiddle