如何在jQuery中获取动态隐藏ID值？

Question

In html, I have used hidden fields with dynamic ids.

<a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="123" />something 1</a>

<a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="456" />something 2</a>

<a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="789" />something 3</a>

Here I am getting the id of the above hidden element in jquery.

var hiddenID = $('input[name$="edit_hid"]').attr('id');
alert(hiddenID );

Whenever I click the hyperlink something 1, something 2, something 3, I am always getting the id as edit_0

How can I get the dynamic id for each hyperlink? so that I can get the value of those dynamic ids.

Answer 1

One solution is to use :hidden in jquery selector:

 $("a").on("click", function(){ alert($(":hidden", this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="123" />something 1</a> <a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="456" />something 2</a> <a><input type="hidden" name="edit_hid" id="edit_'+id+'" value="789" />something 3</a> 

Answer 2

Some thing like this might work, could you be more clear, how were these link dynamically aadded, this may effect how this should work?

<script>
     $(function(){
       $(".hidden").click(function(){
         var a = $(this).attr("id");
       alert(a);
       });
       });
    </script>

Answer 3

you are using $('input[name$="edit_hid"]') that returns a collection (array)

when you take attr('id') it will return the first [0] (id=0)

so you should use

var a=$('input[name$="edit_hid"]')[0].attr('id');
var b=$('input[name$="edit_hid"]')[1].attr('id');
var c=$('input[name$="edit_hid"]')[2].attr('id');

check for length property of the collection $('input[name$="edit_hid"]').length (it should be 3)

I think you don't need click function over a hidden input.

Answer 4

Try this.

   $(document).ready(function() {
     var hiddenID;
      $('input').live("focus", function() {
        hiddenID = $(this).attr('id');
        alert(hiddenID );
        });
   });

`focus will binds only to elements that exist at the time it's called.

live() binds a function to an event for all existing elements, and any that are added to the DOM later.

Hope it will help you :)