javascript - 使用 .on() 时传递值

Question

addOnClickToPathContents() 函数用于向某些动态创建的 li 标签添加 onclick 事件，以便在单击 li 标签时调用 pathBuilder() 函数。 pathBuilder() 函数需要一个参数。有没有办法将 fileList[f] 作为 .on() 代码行的一部分传递给 pathBuilder？如果是这样，怎么办？

function addOnClickToPathContents(fileList)
{
	for(var f in fileList)
	{
		$('#' + fileList[f]).on('click', pathBuilder);
	}
}

function pathBuilder(file)
{
	console.log(file);
  //once this works, use file in logic within this function
}

Answer 1

是的，您可以在父元素上使用事件委托(delegate)。假设您有包含文件所有数据的 fileList 对象。键是列表元素的 ID，在这种情况下，您甚至不需要循环，只需单击列表 id 时从对象中选取一个值即可。保持简单;)

(function($){
  
  var fileList = {
    file1: {data: {url: '/file1'}},
    file2: {data: {url: '/file2'}},
    file3: {data: {url: '/file3'}},
    file4: {data: {url: '/file4'}}
  }
  
  var fileBuilder = function(file){
    console.log(file);
  }
  
  $(function(){
    
    $('#fileList').on('click', '.file', function(){
      var file = fileList[this.id];
      fileBuilder(file);
    });
    
    
    
  });
})(jQuery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fileList">
  <li class="file" id="file1">File 1</li>
  <li class="file" id="file2">File 2</li>
  <li class="file" id="file3">File 3</li>
  <li class="file" id="file4">File 4</li>
</ul>