DEMO

$(document).ready(function () {
    $(document).on('click', '.btn1', function (e) {
        var qwe = $(this).data('id');
        var asd = $(this).data('table');
        console.log(qwe);
        $('#btn2').attr('data-id', qwe);
        $('#btn2').click();

    });
    $("#btn2").click(function (e) {
        e.preventDefault();
        var q = $(this).data('id');
        var a = $(this).data('table');
        console.log(q);
        func1(q, a);
    });
});

function func1(data, value) {
    $('#text').val(data);
}

I have here 3 buttons; namely btn1,btn1.1,btn2. btn1 and btn1.1 share the same class btn1 I have a click event on class btn1. On btn1 click event I get the btn's data-id using $(this).data('id'); then i set it that same attr in btn2 like this $('#btn2').attr('data-id', qwe);. On click of btn2 I run a function that sets the value of an input.

My problem is like this, when I click on btn1 the data-id is passed onto btn2 I can see that it changes in dev tools. When I click again in btn1.1 the data-id is still passed onto btn2 in dev tools but it does not change in the input val.

Why is this happening. How to fix this?

UPDATED FIDDLE

Updated fiddle checking for click event in btn2

DEMO

$(document).ready(function () {
    $(document).on('click', '.btn1', function (e) {
        var qwe = $(this).data('id');
        var asd = $(this).data('table');
        console.log(qwe);
        $('#btn2').attr('data-id', qwe);
        $('#btn2').click();

    });
    $("#btn2").click(function (e) {
        e.preventDefault();
        var q = $(this).data('id');
        var a = $(this).data('table');
        console.log(q);
        func1(q, a);
    });
});

function func1(data, value) {
    $('#text').val(data);
}

I have here 3 buttons; namely btn1,btn1.1,btn2. btn1 and btn1.1 share the same class btn1 I have a click event on class btn1. On btn1 click event I get the btn's data-id using $(this).data('id'); then i set it that same attr in btn2 like this $('#btn2').attr('data-id', qwe);. On click of btn2 I run a function that sets the value of an input.

My problem is like this, when I click on btn1 the data-id is passed onto btn2 I can see that it changes in dev tools. When I click again in btn1.1 the data-id is still passed onto btn2 in dev tools but it does not change in the input val.

Why is this happening. How to fix this?

UPDATED FIDDLE

Updated fiddle checking for click event in btn2

• javascript
• jquery
• html

• Are you sure the btn2 click event is being called? If it is not calling then try to replace $('#btn2').click() with $('#btn2').trigger('click') – Gagan Jaura Commented Sep 22, 2015 at 6:50
• yes it is clicked check jsfiddle/a0qqkgdL/2 – guradio Commented Sep 22, 2015 at 6:50
• @Gagan $('#btn2').click() and $('#btn2').trigger('click') is same. Check api.jquery./click – Ashraf Purno Commented Sep 22, 2015 at 6:52
• @Pekka The answer below is correct. Alternatively, you can send extra parameters when triggering event, Check Demo – Tushar Commented Sep 22, 2015 at 6:56

2 Answers 2

DEMO

Set value using the following using data() itself.

$('#btn2').data('id', qwe);

You cannot use attr() for setting data because data-id is not a valid attribute for an element.

But if you use prop() instead of attr() it will work.

$('#btn2').prop('data-id', qwe);

Now please have a run the below Snippet and you can reduce delay time once you're able to see the Btn2 data value updated.

Thanks

$(document).ready(function () {
    $(document).on('click', '.btn1', function (e) {
        var qwe = $(this).data('id');
        var asd = $(this).data('table');
        
        $('#btn2').attr('data-id', qwe);
        
        setTimeout(function(){
          $('#btn2').click();
        }, 2000); 
    });
  
    $("#btn2").click(function (e) {
        e.preventDefault();
        var q = $(this).data('id');
        var a = $(this).data('table');
        func1(q, a);
    });
});

function func1(data, value) {
    $('#text').val(data);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Btn 1" data-table="btn 1 table val" data-id="btn 1 id val" class="btn1" />
<input type="button" value="Btn 2" id="btn2" />
<input type="text" value="" size="50" id="text" />