Question

单击“编辑”按钮，我将显示一个名称存在于相应数据属性 data-catname

下的模态

我正在更改模态中的名称并更新文本以及相应的数据属性 data-catname

但是当我重新打开Modal时，它显示了我的prevoius名称

这是我的代码

function addCatSbmt()
{
        var category_name_modal = $("#catnameedit").val();
        var category_id_modal = $("#catidhiddenedit").val();
        var trid = category_id_modal;
        var texttoreplace = category_name_modal;
        $("#span" + trid).text(texttoreplace);
        $('#' + trid).find(".editcatclick").attr('data-catname', texttoreplace);
          $('.closetagdialog').trigger('click');
}

如何重现：

1.单击编辑按钮（TCS），它将打开一个名为TCS的POP UP，将名称更改为其他名称。

2.再次单击相同的“编辑”按钮，它仅显示TCS

https://jsfiddle.net/BVV5T/313/

Answer 1

我的问题是.data()函数在模态show函数中使用过。

将.data替换为.attr，您将获得所需的结果。

$('#editCategoryname').on('show.bs.modal', function(e)
{
        var cat_name = $(e.relatedTarget).attr('data-catname');
        var cat_id = $(e.relatedTarget).attr('data-categorid');
        $(e.currentTarget).find('input[name="catnameedit"]').val(cat_name);
        $(e.currentTarget).find('input[name="catidhiddenedit"]').val(cat_id);
});

Updated Fiddle

- 帮助：）

Answer 2

您可以使用数据进行访问，但需要以类似的方式更新数据属性

data('catname',texttoreplace)

但要更新，您需要为您提供包含数据属性的标记

像

<a data-toggle="modal" data-target="#editCategoryname" data-categorid="1" id="cat_1" data-catname="TCS" class="btn btn-sm btn-primary editcatclick"><i class="icon-pencil"></i></a>

所以这是你接下来的小提琴

fiddlle

请检查此网址以了解有关数据属性的信息

jQuery Data vs Attr?

BootStrap模态数据属性未刷新

2 个答案: