Question

我试图附加一个on click事件来动态创建li标签来调用一个带有一个参数的函数。要传递的参数是每个li的value属性中的任何字符串。以下是我程序中的代码片段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

//this is a sample of the format of data in fileList
{"files":["backups","FilesAndFolders.php"]}

//this data is made usable in the the JS code like so

var extracted = JSON.parse(data);
var fileList = extracted.files;


//the li's are being generated by this code which is called by a main function within the JS script
function pathContents(fileList)
{
	var list = $('<ul/>').addClass('files');
    $.each(fileList, function (_, file) {		
		$('<li/>').addClass('file').attr('value', file).text(file).appendTo(list);
    });
    return list;
}

//after main function gets list back from pathContents() it calls this function
function addOnClickToPathContents(fileList)
{
  	$('.files').on('click', '.file', function(){
		var file = fileList[this.value];
		pathBuilder(file);
	});
}

<ul class="files">
	<li value="backups" class="file">backups</li>
	<li value="FilesAndFolders.php" class="file">FilesAndFolders.php</li>
</ul>

此代码的问题在于它将事件分配给ul而不是每个li。有没有办法对其进行修改，以便将点击事件分配给每个孩子？

Answer 1

真正的问题是li元素没有名为value的属性，this.value将始终返回0.相反，您可以使用attr()方法：

$('.files').on('click', '.file', function(){
    var file = $(this).attr("value");
    pathBuilder(file);
});

如果您想使用fileList索引从li数组访问该文件，可以使用index()方法：

$('.files').on('click', '.file', function(){
    var file = fileList[$(this).index()];
    pathBuilder(file);
});

我希望这会有所帮助。

动态创建子元素的父元素上的事件委托

1 个答案: