jQuery trigger click doesn't work

Question

This is my script :

<script type="text/javascript">
    function is_numeric(n){
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    jQuery(document).ready(function(){
        // Est-ce que on doit forcer l'ouverture d'un asset en particulier ?
        var Hash = window.location.hash;
        var Triggered = false;

        if(Hash != undefined && Hash != ''){
            Hash = Hash.substring(2);

            if(is_numeric(Hash) === true && Hash > 0){
                Triggered = true;
                jQuery('.show-container[data-id="'+Hash+'"]').trigger('click');
            }
        }

        if(Triggered === false){
            jQuery('.show-container:first-child').trigger('click');
        }

        jQuery('.show-container').bind('click', function(e){
            //  On empêche l'action par défaut du lien
            e.preventDefault();

            if(ContainerEl.css('display') == 'none'){
                ContainerEl.show(0, function(){
                    SubContainerEl.slideDown(300, function(){
                        // Other code there...
                    });
                });
            } else {
                // On cache le tout
                SubContainerEl.slideUp(300, function(){
                    ContainerEl.hide(0);
                });
            }
        });
    });
</script>

and this is the html

<h4 class="heading"><a class="show-container" data-id="1" href="javascript:void(0);">BC600 | <span id="assign_count_1">0</span> / 5</a></h4>
<div id="asset-data-1" data-ajax-loaded="false" class="row-fluid" style="display: none;">
    <div data-container="true" class="span12" style="display: none; height: 310px; overflow: auto;"></div>
</div>

<h4 class="heading"><a class="show-container" data-id="2" href="javascript:void(0);">Ultrabook HP3608 | <span id="assign_count_2">9</span> / 25</a></h4>
<div id="asset-data-2" data-ajax-loaded="false" class="row-fluid" style="display: none;">
    <div data-container="true" class="span12" style="display: none; height: 310px; overflow: auto;"></div>
</div>

The thing is, when window.location.hash is not empty, I want to read it and extract the information. The information will be something like #a2 or #a23 ... the number is the AssetID .

If I see a valid ID, I want to trigger the click, if not I want to trigger the first one by default.

This doesn't work and the console give me no error. I placed some alert to check if the script was going far enough and yes, he does but the trigger do nothing.

Thanks.

Answer 1

You are trying to trigger the click before it has been bound. Your code should be like this:

// This section orignally appeared after the triggering of the click
jQuery('.show-container').bind('click', function(e){
    // Your code
});

if(Triggered === false){
    jQuery('.show-container:first-child').trigger('click');
}

Also as a note, depending on what version of jQuery you are using, bind is deprecated and should be replaced by on() .

jQuery('.show-container').on('click', function(e){
    // Your code
});

Answer 2

The problem is that your Hash is a String; is_numeric() will return true even if you pass it a String like '20' or '55'.

You need to convert the string to number.

A way to do this is:

var Hash = 'a23';
Hash = Hash.substring(2);

var actualNumber = Number(Hash); // Here you convert the string to number

This should work.