jQuery动态赋值元素val属性异常及AJAX添加列表项问题求助

问题描述 #

我通过AJAX向#exercise-checkbox-list动态添加列表元素，后端逻辑正常。首次添加练习时一切正常，但第二次添加时，新练习对应的<a href='#' val='user_exercise_id' class='fa fa-times'>标签的val属性会变为首个添加元素的val值。排查后发现，问题出在使用jQuery('#exercise-times-button').attr('val', user_exercise_id)赋值时，所有练习的删除按钮共用了同一个id，导致每次修改的都是首个元素的val。相关AJAX代码如下：

jQuery.ajax({ 
  url: '/ajax/add_exercise/', 
  dataType: 'json', 
  data: { 
    'exercise_type': 0, 
    'exercise_id': exercise_id, 
    'duration': duration, 
    'daily_person_id': daily_person_id, 
    'daily_exercise_program_id': daily_exercise_program_id, 
    'csrfmiddlewaretoken': '{{ csrf_token }}', 
  }, 
  type: 'POST', 
  success: function (data) { 
    user_exercise_id = data.user_exercise_id; 
    console.log(user_exercise_id); 
    jQuery("#exercise-checkbox-list").append('<li> <label> <span><strong>' + exercise_name + "| " + duration + " min" + " | " + how_many_calorie_burn + " cal burned" + '<strong></span>\n <a href=\'#\'\n' + ' class="fa fa-pencil"></a>\n' + ' <a href=\'#\' val="user_exercise_id" class="fa fa-times"></a> </label> </li>'); 
    jQuery('#exercise-times-button').attr('val', user_exercise_id); 
  } 
});

解决方案 #

这个问题的核心是HTML中id必须唯一，你所有动态生成的删除按钮共用了同一个exercise-times-button id，导致jQuery的$('#exercise-times-button')只会选中页面上第一个匹配该id的元素，所以每次添加新练习时，都在修改第一个删除按钮的val，而不是当前新生成的那个。

解决方法很简单，直接在动态生成HTML的时候，就把正确的user_exercise_id赋值给当前的删除按钮，不需要事后通过id去查找修改：

步骤1：修改append的HTML代码 #

把原来固定写死的val="user_exercise_id"改成动态拼接变量值：

jQuery("#exercise-checkbox-list").append('<li> <label> <span><strong>' + exercise_name + "| " + duration + " min" + " | " + how_many_calorie_burn + " cal burned" + '</strong></span>\n <a href=\'#\' class="fa fa-pencil"></a>\n <a href=\'#\' val="' + user_exercise_id + '" class="fa fa-times"></a> </label> </li>');

步骤2：删除无效的id赋值代码 #

直接删掉这句只会修改第一个元素的代码：

// 删掉这行，不再需要
jQuery('#exercise-times-button').attr('val', user_exercise_id);

（可选）更规范的做法：使用data属性 #

HTML里不建议用自定义的val属性，更标准的方式是用data-*属性来存储自定义数据，比如：

// 生成元素时用data属性
jQuery("#exercise-checkbox-list").append('<li> <label> <span><strong>' + exercise_name + "| " + duration + " min" + " | " + how_many_calorie_burn + " cal burned" + '</strong></span>\n <a href=\'#\' class="fa fa-pencil"></a>\n <a href=\'#\' data-user-exercise-id="' + user_exercise_id + '" class="fa fa-times"></a> </label> </li>');

后续需要获取这个值的时候，用jQuery的.data()方法：

// 比如绑定点击事件时获取值
jQuery(document).on('click', '.fa.fa-times', function() {
  const userId = jQuery(this).data('user-exercise-id');
  // 这里做删除逻辑
});

这样修改后，每个新生成的删除按钮都会携带自己对应的user_exercise_id，不会再出现值被覆盖的问题了。

内容的提问来源于stack exchange，提问作者umutözdemir