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

是的，您可以在父元素上使用事件委派。假设您有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>

Answer 2

有两种方法可以做到这一点，

1）将参数绑定到函数：

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

function pathBuilder(file) {
  console.log(file);
}

2）使用匿名函数创建一个闭包：

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

编辑：一种更简洁的方法，可以避免jQuery id / class混乱。
假设您有一个列表：

<li class="file"></li>
<li class="file"></li>
<li class="file"></li>
...

您可以使用jQuery迭代这些：

$('.file').each(function(i, el) {
  $(el).click(pathBuilder.bind(null, fileList[i]));
});

使用.on（）时传递一个值

2 个答案: