用于检测数据标签中值变化的自定义事件答案

【问题标题】：Custom event to detect change of value in data tag用于检测数据标签中值变化的自定义事件
【发布时间】：2019-01-10 17:25:56
【问题描述】：

我有一个 div，其中有一个表单，其中有一个我命名为 data-av 的数据标签

我将 div 附加如下

> $("#desti_div").append("<div class='tmar"+count+"'><div
> class='form-group col-md-6 getspace'><label><i class='gicon fas
> fa-circle'></i> New Destination</label><input class='form-control
> input-lg form-field very_form' type='text' id='added_dest"+count+"'
> data-av='' name='added_dest' placeholder='New Destinaton' required><a
> href='' class='gored'><span
> class='form-control-feedback'></span>Delete</a></div><br/></div>");

我想在每次data-av 的值发生变化时触发一个事件。具有data-av 的输入的 id 具有 id id='added_dest"+count+"'，如上面的代码所示，因此我应该使用该 id 定位输入。

我在想这个

$('#someID').data("key", "newValue").trigger('changeData'); 

$('#someID').on('changeData', function (e) {    
    alert('My Custom Event - Change Data Called! for ' + this.id);
});

如果newValue 发生变化，我如何查看以显示自定义事件。

【问题讨论】：

标签： javascript jquery html html-dataset

【解决方案1】：

您可以使用Attribute selectors。同样在定义changeData事件处理函数后触发事件：

$("#desti_div").append(`<div class='tmar"+count+"'><div
 class='form-group col-md-6 getspace'><label><i class='gicon fas
 fa-circle'></i> New Destination</label><input class='form-control
 input-lg form-field very_form' type='text' id='added_dest"+count+"'
 data-av='' name='added_dest' placeholder='New Destinaton' required><a
 href='' class='gored'><span
 class='form-control-feedback'></span>Delete</a></div><br/></div>`);

$('[data-av]').on('changeData', function (e) {    
    alert('My Custom Event - Change Data Called! for ' + this.id);
});
$('[data-av]').data("av", "newValue").trigger('changeData');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="desti_div"></div>

【讨论】：