将数据属性设置为按钮并链接所述属性jquery的值

Setting data attribute to button and chainging the value of said attr jquery

本文关键字：属性 jquery 的值 链接 数据属性 设置 按钮      更新时间：2023-09-26

演示

$(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);
}

我这里有三个按钮；即btn1、btn1.1、btn2。btn1和btn1.1共享同一个类btn1我在类btn1上有一个点击事件。在btn1点击事件中，我使用$(this).data('id');获得btn的data-id，然后像$('#btn2').attr('data-id', qwe);一样在btn2中设置相同的属性。点击btn2后，我运行一个函数来设置输入的值。

我的问题是这样的，当我点击btn1时，数据id被传递到btn2上，我可以看到它在开发工具中发生了变化。当我在btn1.1中再次单击时，数据id仍然传递到开发工具中的btn2上，但它在输入值中没有改变。

为什么会发生这种情况。如何解决此问题？

更新的FIDDLE

更新了btn2 中点击事件的fiddle检查

DEMO

使用data()本身使用以下内容设置值。

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

不能使用attr()设置data，因为data-id不是元素的有效属性。

但是，如果使用prop()而不是attr()，它将起作用。

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

现在请运行下面的代码段，一旦您能够看到更新的Btn2数据值，就可以减少延迟时间。

感谢

$(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.com/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" />

相关文章：