如何使用jQuery选择Mustache生成的新创建元素？

你碰到的问题其实有两个核心原因：

• 首先，return语句会直接终止函数执行，所以return之后的代码根本不会运行；
• 其次，Mustache生成的只是HTML字符串，还没有被插入到DOM树中，这时候用jQuery('.show')自然找不到对应的元素。

下面给你两种可行的解决方案，根据你的需求选择：

方案一：先操作再返回（无需提前插入DOM） #

这种方式适合你需要先对元素做一些初始化操作（比如绑定事件、修改样式），再把元素交给调用方插入DOM的场景：

function generate_hello(element) {
  var template = jQuery('#hello_template');
  // 1. 先把Mustache生成的HTML存到变量，不要直接return
  var generatedHtml = mustache(template.html(), { tooltip: 'Hello' });
  // 2. 把HTML字符串转换成jQuery对象——这一步是关键！
  var $newButton = jQuery(generatedHtml);
  
  // 3. 在这里直接操作这个jQuery对象，哪怕还没插入DOM也生效
  $newButton.on('click', function() {
    alert('Hello 按钮被点击啦！');
  });
  $newButton.attr('title', '这是生成的按钮');
  
  // 4. 最后返回你需要的内容：可以是jQuery对象，也可以转成HTML字符串
  // 如果调用方需要插入DOM，返回jQuery对象更方便
  return $newButton;
}

// 调用示例：把生成的按钮插入到页面中
var $button = generate_hello();
$('#some-container').append($button);

方案二：先插入DOM再操作 #

如果你的逻辑是必须把元素插入页面后再做操作，那可以先完成插入，再选择元素：

function generate_hello(element) {
  var template = jQuery('#hello_template');
  var generatedHtml = mustache(template.html(), { tooltip: 'Hello' });
  var $newButton = jQuery(generatedHtml);
  
  // 1. 先把元素插入到目标DOM节点中
  element.append($newButton);
  
  // 2. 这时候不管是用之前的$newButton变量，还是用类选择器都能选中
  $('.show').css('background-color', '#42b983');
  $newButton.on('mouseenter', function() {
    $(this).addClass('hover');
  });
  
  return $newButton;
}

// 调用示例：直接传入要插入的容器元素
generate_hello($('#target-container'));

为什么之前的方法无效？ #

• 把选择器放在return前面：这时候元素只是字符串，还没进入DOM，jQuery无法从DOM树中找到它；
• 移除return：虽然代码能执行，但你没法把生成的HTML输出到需要的地方，失去了函数的意义。

通过先把HTML字符串转换成jQuery对象，你可以直接在内存中操作这个元素，不管它有没有被插入DOM，操作都会生效；如果需要插入DOM后再操作，那插入后用变量或者选择器都能轻松选中。

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