使用jquery动态获取property_id

Question

I have a table that is dynamically generated. And in the table I have a button called view images. Every time this button is clicked, I need to get the image names from database for that particular property.

        <?php foreach($unapproved as $unapp):?>
        <td>
        <div id="#imagedisplay">
            <input id="property" type="text" value="<?php  echo $unapp->property_id; ?>" style="display :none">

        </div>

        <br/><b>Title : <?php  echo $unapp->title; ?></b> <br/><?php  echo nl2br($unapp->full_description); ?></td>
        <td>
            <a  id="view_image" class="btn btn-default" >View Images</a><br/><br/><br/>
            <a  class="btn btn-default" style="color:Green;">Approve</a><br/><br/><br/>
            <a  class="btn btn-default" style="color:red;">Delete</a>
        </td>
        <?php endforeach; ?>

Every time the view images is clicked, need to get the value (property_id) from <input id="property" type="text" value="<?php echo $unapp->property_id; ?>" style="display :none"> using jquery. so that i can do the ajax call.

My problem is, I want to get the property_id of the clicked. I tried this way but it works only for the first property.

  <script>
$('#view_image').click(function(e){
    e.preventDefault();
    var prop_id = $('#property').val();
    console.log(prop_id);
});
</script>

application looks like this

Simple words, I need the property_id of the clicked property.

Can anyone give me suggestions to get the id of the clicked property?

Answer 1

There are many ways to solve this issue, but one easy way is adding an data attribute to your link:

<a class="view_image btn btn-default" data-property-id="<?php echo $unapp->property_id; ?>">View Images</a>

and then changing your script to:

$('.view_image').click(function(e){
    e.preventDefault();
    var prop_id = $(this).data('property-id');
    console.log(prop_id);
});

Just as bonusinfo: It is not allowed to have multiple elements with the same id. Use class' instead.