为什么jQuery无法获得输入值？

Question

I have used an asp.net repeater to repeat images.

I want to get the primary key ID returned from the database upon clicking the image via jquery but it shows undefined. I am storing image in input text field and it's getting displayed in that but not in alert.

jQuery:

function displayStory() {
    var txtIDValue = $(this).find('input[id$=txtID]').val();
    var id = txtIDValue;
    alert(id);
}

Repeater:

<asp:Repeater ID="rptrImages" runat="server">
    <ItemTemplate>    
        <div class="col-md-4">
            <div class="thumbnail">
                <input type="text" id="txtID" value='<%#Eval("ID")%>' />
                <asp:ImageButton ID="imgButtonStory" OnClientClick='displayStory();return false;' runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' 
                 CssClass="img-responsive img-rounded" />
            </div>    
        </div>
    </ItemTemplate>
</asp:Repeater>

Answer 1

this doesn't not refers to element which invoked the click event handler, it refers to window object. You can use .call() to set the context

<asp:ImageButton ID="imgButtonStory" OnClientClick='displayStory.call(this);return false;' runat="server" ImageUrl='<%# "UploadedImages/"+ Eval("Image") %>' 
                         CssClass="img-responsive img-rounded" />

and in the script, You need to use .prev() as the text box is not child element of ImageButton

var txtIDValue= $(this).prev('input[id$=txtID]').val();
//var txtIDValue= $(this).closest('div').find('input[id$=txtID]').val();

Answer 2

you can simply say:

function displayStory() {
    var txtIDValue = $('input[id="txtID"]').val();
    var id = txtIDValue;
    alert(id);
}

$('input[id="txtID"]') will find the element <input type="text" id="txtID" value='whatYouAreTryingToFind' /> and create a jQuery selector for it.

Tip: In jQuery the scope of $(this) for events can be interesting, so always check exactly what it returns Scope and this in JavaScript .