尝试创建一个动态列表项.jQuery

Trying to create a dynamic list item. jQuery

本文关键字：动态 一个 列表 jQuery 创建      更新时间：2023-09-26

我有几个列表项，在左侧垂直对齐。我试图使右侧的容器，这是空的，将填充来自该列表项的特定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属性不存在。试试这个:

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

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

相关文章：