jquery click function does not work

Question

I have a asp.net web application written in VS 2013. The application has nested master pages and main master page has following codes:

<!DOCTYPE html>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

My web form consists of following codes also:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textbox1').click(function () {
                alert('Hello');
            });
        });
    </script>

<div class="form-group">
    <label class="control-label">Name</label>
    <input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>

And when I build the project and run on browser (either ie or chrome), I click on "textbox1" and browser does nothing.

Appreciate for help.

</script> tag was forgotten at the moment cut and paste.. apologise. — Sertan Pekel
– Sertan Pekel, Commented Jun 13, 2017 at 5:52

Christos · Accepted Answer · 2017-06-13 21:36:08Z

3

You should replace this:

$('#textbox1')

with this:

$('#<%=textbox1.ClientID%>')

Your textbox is a server side control. So you have to read the ClientID, in order to read the ID for HTML markup that is generated by ASP.NET. For further info please have a look here. Generally as it is stated in the previous link:

When a Web server control is rendered as an HTML element, the id attribute of the HTML element is set to the value of the ClientID property

Furthermore, you have to remove the closing script tag, </script>, just before the opening script tag, <script> of your script.

edited Jun 13, 2017 at 21:36

answered Jun 13, 2017 at 5:02

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Lundstrom · Accepted Answer · 2017-06-13 05:04:21Z

0

You have an extra </script> tag immediately after your asp tag.

Try the same code without it:

<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#textbox1').click(function () {
                alert('Hello');
            });
        });
    </script>

<div class="form-group">
    <label class="control-label">Name</label>
    <input type="text" id="textbox1" class="form-control" placeholder="Name" maxlength="50" runat="server">
</div>

Works for me here: https://jsfiddle.net/mutjg5sq/

answered Jun 13, 2017 at 5:04

Matthew Lundstrom

1171 silver badge10 bronze badges

Comments

user688 · Accepted Answer · 2017-06-13 05:13:59Z

0

Try this, Hope it help you

Script:

<script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

Html:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server>

Jquery:

<script>
     $('#textbox1').click(function () {
                    alert('Hello');
                });
</script>

answered Jun 13, 2017 at 5:13

user688

3613 silver badges23 bronze badges

Collectives™ on Stack Overflow

jquery click function does not work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related