按钮onclick功能在jQuery中无法正常工作

Question

i am trying to execute external function using button onclick event in asp.net mvc application.But some resign it not work properly, i cant understand what the resion.

<input type="button" id="123" onclick="alert('123')" value="Button 1" />
 <input type="button" id="124" value="Button 2"  />
 <input type="button" id="125" onclick="Show_id();" value="Button 3" />
 <input type="button" id="126" value="Button 4" />

JQuery code here.

<script type="text/javascript">
$(document).ready(function () {
    $("124").click(function () {
        alert(this.id);

    })

    function Show_id() {
        alert(this.id);
    }
    $("126").click(function () {
        alert("message");

    })


})

when Button 1 Click Then It work Properly.But remaining 3 bytton not work.

Answer 1

 $(document).ready(function () { $("#124").click(function () { alert(124); }) function Show_id(e) { alert(e.type); } $("#126").click(function () { alert("message"); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="123" onclick="alert('123')" value="Button 1" /> <input type="button" id="124" value="Button 2" /> <input type="button" id="125" onclick="return Show_id(event);" value="Button 3" /> <input type="button" id="126" value="Button 4" /> 

Answer 2

Ive posted a jsfiddle here. https://jsfiddle.net/1tsx7e6z/

<input type="button" id="123" onclick="alert('123')" value="Button 1" />
<input type="button" id="124" value="Button 2"  />
<input type="button" id="125" onclick="Show_id()" value="Button 3" />
<input type="button" id="126" value="Button 4" />

$(document).ready(function () {
    $("#124").click(function () {
        console.log('124');
    });

    $("#126").click(function () {
        alert("message");
    });

});

//Note its outside of ready() above. Also I use window.xyz here because of jsfiddle loading into 'load' scope by default, so im attaching to window. This is generally bad practice either way, avoid inline click function calls.
window.Show_id = function() {
     alert(event.target.id);
}

1. You are missing #

2. Your show_id is in a different scope (its in document.ready)

3. Don't call inline onclick events :) Its bad practice. Use jQuery as you have for #126 to hook into one.

4. Also don't ever allow user input to be added to oncliick="somethingFromTheUser" as they can easily inject javascript in places you may not expect (there's too many attack vectors to worry about adding it, just don't do it)