Question

存在类似的问题，但尚未得到圆满解答。

我有一个页面可以将数据加载到如下所示的模板中：

<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
    <td>
        <input type="checkbox" name="delete" value="1" class="toggle">
        <span class="preview">
            {% if (file.thumbnailUrl) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                <img src="{%=file.opimg%}" class="clipped_thumb" clipped_thumb="{%=file.name%}">
            {% } %}
        </span>
    </td>
    <td>
/*
some more code
*/
    <button type="button" class="process_indv btn btn-info" filename="{%=file.name%}" onclick="javascript:process_indv('{%=file.name%}')">
    <i class="glyphicon glyphicon-trash"></i>
        <span>Process</span>
    </button>
</script>

我需要触发点击'.process_indv'按钮，如下所示：

$(document).ready(function () {
    $('.process_indv').trigger('click');
});

它不起作用。我也试过.click（），但无济于事！

请帮我解决这个问题。感谢。

Answer 1

您的On-Load事件在加载DOM时立即发生，并且可能在呈现模板并插入DOM之前发生。

在On-Load事件中，将虚拟触发器设置为大约一秒钟的超时，或者将虚拟点击添加到模板呈现器上的回调。

setTimeout(function(){$('.process_indv').trigger('click')}, 1000);

连接速度：不，这只是执行顺序的问题。您可以拥有世界上最快的连接，但渲染器也可能在onload上触发，因此，触发点击的（真正快速调用）将在（相对较慢的）调用加载之前完成模板，解析它，然后将其插入DOM。这就是为什么回调如此强大，它们确保即使在异步环境中也能按顺序发生事情。

查看模板渲染器上的文档，看看它们是否提供事件回调，因为这些是确保在模板可用时发生事情的最佳选择。

语义：另一位用户指出，选择一个类会迭代该类类型的所有元素，这可能是不明智的。但你也不一定错了。即使ID可以返回多个元素（如果使用不正确），如果您控制模板并且知道事情将始终如此，则不需要按元素类型进行选择。

所有这些都说，通过指定元素类型的可读性来使选择器在语义上正确可能并不是一件坏事。在这种情况下，这不是必需的，因为这是一个测试，但在将来它可能不是一个坏的习惯进入。

Answer 2

在呈现模板时写一个onRendered()回调。然后从模板中调用该回调。一个例子：

<head>
    <script>
        window.Template = {
            onRendered: function() {
                $(function() {
                    $("#trigger-me").click();    
                });
            }
        };
    </script>
</head>
<body>
    <script type="text/template">
        This is template stuff here.
        <button type="button" id="trigger-me">
            Click Me
        </button>
        <script>Template.onRendered();</script>
    </script>
    Other, non-template stuff.
    <script>
        // Here's the script to render the template
    </script>
</body>

Answer 3

使用js文件中的以下代码绑定您的点击功能：

$(function() {
    $('body').on("click", ".process_indv", function () {
        whattodowhenbuttonisclicked
    }); 
});

然后您的点击代码应该有效：

$(document).ready(function () {
    $('.process_indv').trigger('click');
});

.process_indv类总是会出现在按钮上吗？如果是这样，你应该使用$（'button.process_indv'）来绑定/触发事件。

直接选择除了类之外的任何内容都会使脚本遍历DOM中的每个元素以搜索您的类。

模拟单击动态添加按钮

3 个答案: