如何使用带参数的jQuery $('body').on 传递.urlsend元素参数至函数

嘿，我来帮你搞定这个需求！下面是完整的实现方案，包括HTML结构、自定义函数和对应的jQuery事件绑定逻辑，每一步都给你讲明白：

首先先把你需要接收参数的函数写好，这里我举个示例，你可以根据自己的需求修改内部逻辑：

// 这是你定义的接收参数的函数，参数是一个对象
function handleUrlSendParams(params) {
  // 这里写你的业务逻辑，比如打印参数看看效果
  console.log('获取到的参数:', params);
  // 举个实际场景的例子：发送请求
  // fetch(params.url, {
  //   method: params.method || 'GET',
  //   headers: { 'Content-Type': 'application/json' }
  // })
  // .then(res => res.json())
  // .then(data => console.log('请求结果:', data));
}

给所有带.urlsend类的元素，用HTML5的data-*属性来存储需要传递的参数——这是存储自定义参数的标准做法，可读性和可维护性都很强：

<!-- 示例1：按钮元素 -->
<button class="urlsend" data-url="/api/submit-form" data-method="POST" data-form-id="789">提交表单</button>

<!-- 示例2：链接元素 -->
<a href="#" class="urlsend" data-url="/api/delete-item" data-method="DELETE" data-item-id="101">删除这个条目</a>

<!-- 示例3：普通div元素 -->
<div class="urlsend" data-url="/api/get-list" data-method="GET" data-category="tech">加载技术列表</div>

这里用$('body').on()的事件委托写法，好处是不管元素是页面加载时就存在的，还是后续动态生成的（比如AJAX新增的），都能触发事件，比直接绑定.urlsend更灵活：

// 给body绑定点击事件，监听所有.urlsend元素的点击
$('body').on('click', '.urlsend', function(e) {
  // 阻止元素的默认行为（比如a标签的跳转、按钮的默认提交）
  e.preventDefault();
  
  // 从当前点击的元素中提取所有data属性，转换成一个参数对象
  const elementParams = $(this).data();
  
  // 调用你定义的函数，把参数传进去
  handleUrlSendParams(elementParams);
});

• 事件委托的优势：如果你的.urlsend元素是动态添加的（比如通过JS生成），直接用$('.urlsend').click()绑定的事件会失效，而事件委托是绑定在父元素（这里用body）上，通过事件冒泡来触发，能覆盖所有新增的目标元素。
• 参数的处理：jQuery的.data()方法会自动把data-*属性转换成驼峰命名的对象，比如data-form-id会变成formId，直接用对象访问就行，非常方便。
• 按需提取参数：如果你不需要所有的data属性，也可以手动指定需要的参数，比如：

  const targetParams = {
    url: $(this).data('url'),
    method: $(this).data('method'),
    id: $(this).data('itemId')
  };
  handleUrlSendParams(targetParams);
  

内容的提问来源于stack exchange，提问作者Štěpán Chvatík