如何在id列表上使用jquery事件?

How can I use jquery events on a list of ids?

本文关键字：jquery 事件 id 列表      更新时间：2023-09-26

我有一个带有id列表的html，如:

<div id="id0" value="myval0">Click me</div>
<div id="id1" value="myval1">Click me</div>
<div id="id2" value="myval2">Click me</div>
<div id="id3" value="myval3">Click me</div>

列表可以由服务器生成。我正在尝试使用jQuery将这个表单发送到服务器，其中id已被点击:

$( "#id0" ).click(function() {
  var urlstring = '/getresult';
alert($("#id0").val());
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: $("#id0").val(),
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

在这种情况下，我已经发送了形式为"id0"的id。但我怎么把它推广到n是任意整数的情况下呢?

试试这个JQuery选择器E[a^=v]，它匹配所有具有属性a的元素E，其值开始宽度为v

html: 

<div id="id-1" value="my val 1">Click me</div>
<div id="id-2" value="my val 2">Click me</div>
<div id="id-3" value="my val 3">Click me</div>
你jQuery 

$('div[id^=id]').click(function() {
  var urlstring = '/getresult';
  var val = $(this).val();
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: val,
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

$( "[id^=id]" ).click(function() {
  var urlstring = '/getresult';
alert($(this).val());
  $.ajax({
    type: "POST",
    url: urlstring,
    data: {
      draft_no: $(this).val(),
    },
    success: function(result){
      alert("Function returned with success!")
    }
  });
});

我认为这个问题是写一个通用的事件处理程序，照顾所有的div s。对于id不能这样做。你必须给你的div一个特定的类，像这样

<div id="id 1" value="my val 1" class="mydiv">Click me</div>
<div id="id 2" value="my val 2" class="mydiv">Click me</div>
<div id="id 3" value="my val 3" class="mydiv">Click me</div>
$(".mydiv").click(function() {
alert($(this).attr("value"));
// ....
});

或者像这样通过容器查找

<div id="mycontainer">
<div id="id 1" value="my val 1">Click me</div>
<div id="id 2" value="my val 2">Click me</div>
<div id="id 3" value="my val 3">Click me</div>
</div>
$("#mycontainer").click(function(evt) {
alert($(evt.target).attr("value"));
// ....
});
相关文章：