试图创建一个动态列表项。 jQuery答案

【问题标题】：Trying to create a dynamic list item. jQuery试图创建一个动态列表项。 jQuery
【发布时间】：2017-01-04 16:20:41
【问题描述】：

我有几个列表项，在左侧并垂直对齐。我正在尝试使右侧的容器（为空）填充来自该列表项特定 ID 的 url 的信息。我能够使用 load() 创建一个 jQuery 函数，它允许我在列表项中单击，数据填充到正确的容器中，但它只是最小 id 的数据。如果我单击其他列表项，则右侧容器中的数据不会更改。目前，我添加了这行代码，

var strReqUrl = $(this).attr('href'); 
alert(strReqUrl);

查看警报是否会显示它应该使用的链接。当我在列表项中单击时，警报显示“未定义”。 :(

我尝试在列表项中添加一个链接，它可以工作。显示了正确的数据，但是，我每次都离开当前页面来查看它，并且它根本没有填充到右侧的容器中，现在在上一页中。

有没有办法将正确的 id 分配给正确的列表项？

这是我的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">     
    $(document).ready(function(){
       $("li").click(function(){
          var strReqUrl = $(this).attr('href');
          alert(strReqUrl);             
    //$("#divId").load("pm_message.php?u=<?php echo $log_username; ?>&pmid=<?php echo $pmid; ?> #pm_post");
       });
    });
    <body>
    <div class="wrapper"> <!--Left and Right container wrapper-->
    <div class="container">
    <div class="left">
      <!--left container-->
      <div class="top">
        <input type="text" />
        <a href="javascript:;" class="search"></a>
      </div>
      <ul class="people">
        <a href="pm_message.php?u=<?php echo $log_username; ?>&pmid=<?php echo $pmid; ?>"><?php echo $people; ?></a> <!--generates list of people-->
      </ul>
    </div>
    <div class="right" id="right">
      <!--Right container-->
      <div class="top"><span class="name"></span></div>
      <div id="divId"></div>
    </div>
    </body>
</html>

还有脚本：

//DB connection
    //Collecting data from db
    //Variable $people collects data for the people listed in the left container
    $people = '
                <li class="person">
                  <a id="a" href="pm_message.php?u='.$log_username.'&pmid='.$pmid.'"><span class="name">'.$sender.'</span></a>
                            <!--<span class="name">'.$sender.'</span>-->
                            <span class="time">'.$time.'</span>
                            <span class="preview">'.$message.'</span>
                </li>';

【问题讨论】：

你的 li 没有 href 属性。使用 $('li > a').click(...)

标签： javascript jquery html attr

【解决方案1】：

当您分配事件处理程序时，li 尚未在文档中。您需要使用委托处理。并且您要查找的 href 属性不存在。试试这个：

$('ul').on('click', 'li', function() {
    var strReqUrl = $(this).find('a').attr('href');
    alert(strReqUrl);
});

查看更多 - http://api.jquery.com/on/

【讨论】：

它已经在服务器端生成了。你的代码在这里不起作用，li 没有 href 属性
感谢您的帮助。出于某种原因，什么都没有发生。我会继续玩它的。