문제

There exists a similar question but has not been satisfactorily answered.

I have a page that loads data into a template that looks like this :

<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>

I need to trigger a click on the '.process_indv' button as follows :

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

It doesn't work. I have also tried .click() but to no avail!

Please help me with this. Thanks.

도움이 되었습니까?

해결책

Your On-Load event happens immediately when the DOM is loaded, and likely before the template is rendered and inserted into the DOM.

In the On-Load event, set the virtual trigger to a timeout of a second or so, or add the virtual click to a callback on the Template Renderer.

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

Connection Speed: No, it is just a matter of execution order. You could have the fastest connection in the world, but likely the renderer also triggers on onload, and because of this, the (really fast call) to trigger the click will inevitably complete before the (relatively slow) call to load the template, parse it, and then insert it into the DOM. This is why callbacks are so powerful, they ensure that things happen in an order, even in an asynchronous environment.

Check with the documentation on your Template Renderer to see if they offer event callbacks, as those are your best bet to ensure that things happen when the template is available to act on.

Semantics: Another user pointed out that selecting a class will iterate over all elements of that class type, which may be ill-advised. But you are not necessarily in the wrong either. Even ID's can return multiple elements (if used incorrectly), and selecting by element type isn't required if you control the templates and know that things will always be as such.

All of that said, it may not be a bad thing to make the selector(s) semantically correct by specifying an element type for readability. In this situation that is not required, as this is a test, but in the future it may not be a bad habbit to get into.

다른 팁

Write an onRendered() callback for when your template is rendered. Then call that callback from within the template. An example:

<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>

Bind your click functionality using the code below in your js file:

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

Then your click code should work:

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

Is the .process_indv class always going to be on a button? If so you should probably use $('button.process_indv') to bind/trigger events instead.

Directly selecting nothing but a class makes the script iterate through each and every element in the DOM to search for your class.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top