将数据传递给jQuery click()函数

I have a simple span like so

我有一个简单的跨度。

<span class="action removeAction">Remove</span>

This span is within a table, each row has a remove span.

这个span是在一个表中，每一行都有一个remove span。

And then I call a URL using AJAX when that span is clicked. The AJAX event needs to know the ID of the object for that row? What is the best way of getting that ID into the click function?

然后在单击span时，我使用AJAX调用URL。AJAX事件需要知道该行对象的ID ?将该ID放入click函数的最佳方式是什么?

I thought I could do something like this

我想我可以做这样的事

<span class="action removeAction" id="1">Remove</span>

But an ID should not start with a number? Right? Then I thought I could do

但是ID不应该以数字开头?对吧?然后我想我能做到

<span class="action removeAction" id="my1">Remove</span>

Then just strip the 'my' part from the ID, but that just seems Yuk!

然后把“我的”部分从ID中去掉，但这看起来太搞笑了!

Below is my click event and where my AJAX event is.

下面是我的单击事件和AJAX事件所在的位置。

<script type="text/javascript" language="text/javascript">

$(document).ready(function()
{

    $(".removeAction").click(function()
    {
        //AJAX here that needs to know the ID            
    }
});

</script>

I am sure there is a nice way of doing this?

我确定有一个很好的方法来做这件事?

Note: I am not looking for

注意:我不是在找

$(this).attr("id");

I want to be able to pass more than one piece of information

我希望能够传递更多的信息。

Thanks. Jake.

谢谢。杰克。

5 个解决方案

#1

If you insist on using old-school HTML 4.01 or XHTML:

如果您坚持使用老式的HTML 4.01或XHTML:

$('.removeAction').click(function() {
 // Don’t do anything crazy like `$(this).attr('id')`.
 // You can get the `id` attribute value by simply accessing the property:
 this.id;
 // If you’re prefixing it with 'my' to validate as HTML 4.01, you can get just the ID like this:
 this.id.replace('my', '');
});

By the way, in HTML5, the id attribute can start with a number or even be a number.

顺便说一下，在HTML5中，id属性可以从一个数字开始，甚至是一个数字。

Then again, if you’re using HTML5 anyway, you’re probably better off using custom data attributes, like so:

同样，如果你使用HTML5，你最好使用自定义数据属性，比如:

<span class="action removeAction" data-id="1">Remove</span>

#2

$(this) within your click function represents the clicked element

$(this)在单击函数中表示单击元素

$(".removeAction").click(function() {
    //AJAX here that needs to know the ID
    alert($(this).attr('id'));           
}

#3

The following code will get you the ID of the clicked span. Using the ID isn't perfect, but it will work.

下面的代码将为您获取单击跨度的ID。使用ID并不完美，但它会起作用。

$(".removeAction").click(function() {
  alert($(this).attr("id"));
});

#4

You could have a hidden field on each row which stores the ID and/or other data needed in a JSON object & use that instead of hacking around with the span tag.

您可以在每一行上有一个隐藏的字段，该字段存储JSON对象中需要的ID和/或其他数据，而不是使用span标签进行攻击。

<tr>
<td>
<span class="action removeAction">Remove</span>
<input type="hidden" value="1" />
</td>
</tr>

$('.removeAction').click(function(){
  var id = $(this).next().val();
  // do something...
});

HTH

#5

You could try jQuery.data(): http://api.jquery.com/jQuery.data , but that would mean server-side generated js code to execute when the page loads so that you can store the ids for later reuse (your remove action)

您可以尝试jQuery.data(): http://api.jquery.com/jQuery.data，但这意味着服务器端生成的js代码在页面加载时执行，以便您可以存储id以便以后重用(您的删除操作)

// this part would have to be server 'generated'
// and by that I'm referring  to the '<?=$row_id?>'
$('table .remove').each(function(){

   var MyElem = $(this);
   MyElem.data('id', <?=$row_id?> );

   MyElem.click(function(){
      the_id = $(this).data('id');
      // ajax call goes here
   });

});

#1