simulating click event of a different selector

Undefined Variable Published at Dev

Undefined Variable

I have a bunch of product buttons like:

    <button class='prd-class' data-prd-id='1'>
      Product 1
    </button>

    <button class='prd-class' data-prd-id='2'>
      Product 2
    </button>

And I have a button click function like so:

$('.prd-class').click(function(){
    $('.prd-class').removeClass('cls-focus'); //remove any focused product
    $(this).addClass('cls-focus'); //then focus on the selected one
    $('#selected-prd-name').text($(this).data('prd-name'));
    ... etc
});

As you can see, it uses this object reference inside the function heavily.

Now there is another situation where at page load I want the lines inside this function to be executed.

Since there are multiple product buttons, I want to ensure that the I am simulating the click event of the required one.

$(document).ready(function()
{
   $("button[data-prd-id='"+prd_id+"']").click();
});

But this does not work. How can I change the code to execute the code lines correctly?

w3dev

I am not sure about your requirements. However, this demo might give you some ideas to resolve your issues.

HTML:-

<button class='prd-class' data-prd-id='1'>Product 1</button>
<button class='prd-class' data-prd-id='2'>Product 2</button>
<div>
    Selected Product ID: <span id="selected-prd-name"></span>
</div>

CSS:-

.cls-focus {
    border: 1px solid red;
    background-color: brown;
}

JavaScript:-

(function () {
    var $prdClass = $('.prd-class'),
        $selectedPrdId = $('#selected-prd-name'),
        prdClassClickHander = function () {
            var $self = $(this);
            $prdClass.removeClass('cls-focus');
            $self.addClass('cls-focus');
            $selectedPrdId.text($self.data('prd-id'));
        },
        init = function () {
            $prdClass.on("click", prdClassClickHander);
        };
    $(document).ready(init);
}());

// Simulate the click on DOMReady
$(document).ready(function () {
    var prd_id = 1;
    $("button[data-prd-id='" + prd_id + "']").trigger('click');
});

JSFiddle Demo:- http://jsfiddle.net/w3devjs/e27jQ/

Collected from the Internet

Please contact [email protected] to delete if infringement.