Javascript 将列表视图的值传递给ajax

我有一个动态创建的列表。创建列表的部分代码是：

<ul>
    <?
        foreach ($folders as $folder)
            {
                $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
                $folder2 = str_replace("[Gmail]/", "", $folder);
            ?>
                <li>
                    <a><div id="box"><? echo $folder2; ?> </div></a>
                </li>
            <?}
</ul>

<div id="maillist"></div>

o/p为$folder2

All Mail
Drafts
Important

我想要的是，当用户单击所有邮件时，对应于它的值（在本例中为：GMAIL/All Mail）应该通过ajax传递给另一个脚本。对于列表中的其他值也应遵循相同的过程

ajax代码

<script>
$(document).ready(function(){
    $('#box').change(function(){

        var boxid = $('#box').val();
        console.log($('#box'))
        if(boxid != 0)
        {

            $.ajax({
                type:'post',
                url:'a_fetchmaillist.php',
                data:{id:boxid},
                cache:false,
                success: function(returndata){
                    $('#maillist').html(returndata);
                    console.log(returndata)
                }
            });
        }
    })
})
</script>   

$（文档）.ready（函数（）{
$（“#框”）.change（function（）{
var-boxid=$（'#box'）.val（）；
console.log（$（'#box'））
如果（boxid！=0）
{
$.ajax({
类型：'post'，
url:'a_fetchmaillist.php'，
数据：{id:boxid}，
cache:false，
成功：函数（返回数据）{
$（'#邮件列表'）.html（返回数据）；
console.log（返回数据）
}
});
}
})
})

---

有人能告诉我是否可以做我想做的事情吗？如果可以，那么怎么做呢？首先，不要多次分配同一个id，而是设置一个类（例如

框
）

然后为特定文件夹分配一个数据属性（例如，
box allmail
），并在更改时选择该属性：

foreach ($folders as $folder)
{
   $folder = str_replace("{imap.gmail.com:993/imap/ssl}", "", $folder);
   $folder2 = str_replace("[Gmail]/", "", $folder);
?>
   <li>
     <div class="box" data-folder="<? echo $folder2 ?>"><? echo $folder2; ?></div>
   </li>
<?}

$(document).on('click', '.box', function() {
   var folder = $(this).attr('data-folder');
   // ajax call..
});

更新

重要提示：您必须收听“单击”事件，而不是“更改”，因为您单击的是div，而不是输入（我已更改了代码）

事件委派：注意代码：

$(document).on('click', '.dynamic-element', function() { .. })

而不是：

$('.element').on('click', function() { .. });

第二个将不起作用，因为您正在动态创建元素

可点击：不必插入锚定标记即可点击列表项，除非您想重定向到另一页。在本例中，您可以设置
.box
div的样式，以获得如下光标指针：

CSS

jQuery将处理其余部分（检查示例）


$（document）.on（'click'，'.box'，function（）{
var folder=$（this.attr（'data-folder'）；
警报（“您单击：”+文件夹）；
});


文件夹一
文件夹二
文件夹三
文件夹四
第一点是，我引入了一个锚定标记，以使列表项可点击（不确定它的工作情况如何，如果您可以查看它，将不胜感激），第二点，我尝试了您的代码，并使用console.log检查var文件夹的值，但其中没有任何内容，我是否遗漏了一些内容？
$('.element').on('click', function() { .. });

.box { cursor:pointer }