动态绑定点击事件中.empty()不执行，直接调用JS函数正常

看起来你遇到的问题是动态生成的按钮点击时无法触发empty()方法，但直接调用函数却正常，这大概率是事件绑定的作用域问题或者内联事件的局限性导致的。让我一步步帮你拆解：

问题根源 #

你通过$('#image-upload1').change()动态生成了#closeBtn1按钮，并且用内联onclick='btnRemove1()'绑定点击事件。如果你的btnRemove1函数是写在$(document).ready()或者其他局部作用域内，那么浏览器在点击按钮时会找不到这个全局函数，自然无法执行empty()操作；但你直接调用函数时，是在同一个作用域内调用，所以能正常生效。

另外，内联事件绑定本身就不太推荐，尤其是对于动态生成的元素，它很容易出现作用域、维护性的问题。

修复方案 #

推荐你使用jQuery的事件委托来绑定点击事件，这样不管按钮是静态还是动态生成的，都能可靠触发。同时也避免了作用域的问题。

修改后的代码： #

首先移除内联onclick，然后用事件委托绑定：

<div id="image-preview1" class="col-xs-2 "> 
  <div id="buttonPlace1"></div> 
  <div> 
    <label for="image-upload1" id="image-label1">上传照片</label> 
    <input type="file" name="image" id="image-upload1"> 
  </div> 
</div>

$(function() {
  // 文件上传change事件
  $('#image-upload1').change(function() {
    // 先检查按钮是否已存在，避免重复添加
    if (!$('#closeBtn1').length) {
      $('#buttonPlace1').append("<button id='closeBtn1' class='btn deleteButton'>X</button>");
    }
  });

  // 事件委托：绑定动态生成按钮的点击事件
  $(document).on('click', '#closeBtn1', function() {
    $('#buttonPlace1').empty();
  });
});

为什么这样有效？ #

• 事件委托是把事件绑定到已经存在的父元素（这里用document作为兜底），当点击子元素（动态生成的按钮）时，事件会冒泡到父元素，然后触发对应的处理函数，不管子元素是何时生成的。
• 避免了内联事件的作用域问题，所有代码都可以封装在$(function(){...})的局部作用域里，更安全。

另一种临时修复（不推荐） #

如果你一定要用内联事件，确保btnRemove1是全局作用域的函数：

// 把函数放在全局作用域
function btnRemove1(){ 
  $('#buttonPlace1').empty(); 
}

$(function() {
  $('#image-upload1').change(function() {
    $('#buttonPlace1').append("<button id='closeBtn1' onclick='btnRemove1()' class='btn deleteButton'>X</button>");
  });
});

但这种方式不如事件委托可靠，尤其是在复杂项目中，全局函数容易引发命名冲突。

内容的提问来源于stack exchange，提问作者DarekK