如何用jQuery将img标签的data-sourceori值复制到input#source中？

问题分析 #

你的代码存在两个核心问题：

1. jQuery代码未闭合，缺少});来结束事件绑定逻辑
2. 未等待DOM加载完成就执行绑定，可能找不到目标元素；同时img选择器范围过广，容易误触发其他图片

修复步骤 #

1. 优化图片标签：给目标图标添加专属类名，缩小事件绑定范围：

<td><img src="'.base_url().'images/function-icons/page_copy.png" class="source-icon" data-sourceori="'.$mot->source.'" title="Ajouter à partir de source '.$mot->source.'" alt="Ajouter à partir de source '.$mot->source.'" width="25"/></td>

2. 修正后的jQuery代码：

// 等待页面DOM完全加载后执行绑定
$(document).ready(function() {
  // 仅绑定带source-icon类的图标点击事件
  $(".source-icon").click(function() {
    // 获取当前图标data-sourceori属性的值
    var sourceValue = $(this).attr("data-sourceori");
    // 将值填入id为source的输入框
    $("#source").val(sourceValue);
  });
});

额外说明 #

• $(document).ready()确保所有DOM元素加载完成后再绑定事件，避免出现"元素不存在"的错误
• 使用类选择器.source-icon替代全局img选择器，只对目标图标生效，避免干扰页面其他图片
• 用attr("data-sourceori")直接获取属性值，比data()更直观，避免jQuery自动驼峰化可能带来的混淆

内容的提问来源于stack exchange，提问作者Patrice