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

Question

我正在基于胡须模板生成一些HTML，例如：

function generate_hello(element) {
    var template = jQuery('#hello_template');
    return mustache(template.html(), {
        tooltip: 'Hello'
    });
    ..nothing gets executed here, no selecting in jQuery, no nothing.
}

因此，该元素：

<input type='button' value='Hello' class='show'>

出生！ 太棒了

除非这不行，否则我要把它放在return mustache...

jQuery('.show');

这也不是：

$('.show');

当然是这样。 return意味着停止执行。 现在，我在返回之前和之后添加了该选择器，删除了返回（无法删除返回，因为这样就不会输出HTML），但是没有任何效果。

如何选择我新创建的元素来玩呢？

Answer 1

您的问题在于，您试图将事件附加到动态添加的元素上，而这仅比在常规例程中添加事件多一点。

这就是你的做法

$('body').on('click', '.show', function() {
  alert("Clicked on element with class show")
});

更新：

function generate_hello(element) {
    var template = jQuery('#hello_template');
    return mustache(template.html(), {
        tooltip: 'Hello'
    });
    ..nothing gets executed here, no selecting in jQuery, no nothing.
}

这里什么都没有执行，没有在jQuery中选择，什么也没有

这是因为您要从函数中返回。 在return语句之后什么也不会执行。 在其他函数中编写代码，然后在generate_hello函数之后调用它。

就像是

generate_hello();
someOtherFunction

Answer 2

请检查注释以及其他答案以获取有价值的信息。

问题不是代码本身，而是我如何设计系统 ，错误，逻辑。

此类代码在包装函数（上一层）中被调用，如下所示：

var markup = $(window[callback](e.currentTarget));
markup.attr('data-screen', callback);
wrapper.append(markup);

当然，我只是追加（我的wrapper ）HTML（一串markup ），这显然没有考虑到在我的原函数来完成什么， 因为它只是输出，仅此而已。

它从我的HTML中获取数据：

<div class="test" data-callback="generate_markup">

并刚刚执行了该回调，这就是我的原始generate_hello 。 而已。

解决方案是在完成输出之后执行另一个回调，因此，在我的wrapper.append(markup); 我只是打电话给我的第二个回调：

var markup = $(window[callback](e.currentTarget));
markup.attr('data-screen', callback);
wrapper.append(markup);
secondary_callback_after_markup_is_done();

我想这里的教训是：控制您的逻辑并知道每个函数返回什么以及如何处理。