按钮 onclick 事件不会在第一次点击时触发

Question

I've checked around and read a couple articles on this issue and tried a few things but nothing seems to be working. The issue is when the button is clicked the first time nothing happens. The second time its clicked then the event and ajax request is fired off. In addition to having to click the button twice the ajax data is requested and displayed twice. Ive seen a few articles that said check the buttons visibility and if it is checking to turn off/on another elements visibility in this case its not. Additionally I have the onclick of the button calling a method to fire the ajax. Whats strange is when i removed the code from the method and place it in the DOM ready the event fires the first time but my ajax data never returns

Button HTML :

<input id="btnSearch" onclick="GetInfo();" type="button" value="Find ID" class="button-ffe" />

Here is the click code :

    function GetInfo() {
    var term = $('#txtUtente').val();

    $('#btnSearch').click(function () {

        var winW = window.innerWidth;
        var winH = window.innerWidth;
        var dialogoverlay = document.getElementById('dialogoverlay');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH + "px";

        $.ajax({
            url: 'DAL/WebService1.asmx/GetPTSID',
            method: 'post',
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify({ term: term }),
            dataType: 'json',
            success: function (data) {
                document.getElementById('dialogoverlay').style.display = 'none';

                $('#infoFoundID').html(data.d[0]);
                $('#foundInfoMessage, #userInformation').show();
                $('#registerProductInfo').hide();                    
                var partTable = $('#partTable tbody');

                $(data.d).each(function (index, id) {
                    partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
                });
            },
            error: function (err) {
                console.log(err);
            }
        });
    });
} //end getinfo

Answer 1

You are attaching the event in the first click, so the code runs like you write.

You can remove the first function definition :

    var term = $('#txtUtente').val();

$('#btnSearch').click(function () {

    var winW = window.innerWidth;
    var winH = window.innerWidth;
    var dialogoverlay = document.getElementById('dialogoverlay');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH + "px";

    $.ajax({
        url: 'DAL/WebService1.asmx/GetPTSID',
        method: 'post',
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify({ term: term }),
        dataType: 'json',
        success: function (data) {
            document.getElementById('dialogoverlay').style.display = 'none';

            $('#infoFoundID').html(data.d[0]);
            $('#foundInfoMessage, #userInformation').show();
            $('#registerProductInfo').hide();                    
            var partTable = $('#partTable tbody');

            $(data.d).each(function (index, id) {
                partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
            });
        },
        error: function (err) {
            console.log(err);
        }
    });
});

Answer 2

So, the first click will run GetInfo() - which, adds a jQuery click listener (but doesn't run it)

then the second click runs the function defined in the click listener - and GetInfo - which adds ANOTHER instance of the jQuery stuff

then the third click runs the function defined in the click listener, twice - and GetInfo - which adds ANOTHER instance of the jQuery stuff

Answer 3

Your jQuery click function is in your GetInfo() function. Change your JS to:

var getInfo = {
    init: function() {
        $(document).ready( function() {
            getInfo.click();
        });
    },
    click: function() {
        var term = $('#txtUtente').val();

        $('#btnSearch').click(function () {

            var winW = window.innerWidth;
            var winH = window.innerWidth;
            var dialogoverlay = document.getElementById('dialogoverlay');
            dialogoverlay.style.display = "block";
            dialogoverlay.style.height = winH + "px";

            $.ajax({
                url: 'DAL/WebService1.asmx/GetPTSID',
                method: 'post',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({ term: term }),
                dataType: 'json',
                success: function (data) {
                    document.getElementById('dialogoverlay').style.display = 'none';

                    $('#infoFoundID').html(data.d[0]);
                    $('#foundInfoMessage, #userInformation').show();
                    $('#registerProductInfo').hide();                    
                    var partTable = $('#partTable tbody');

                    $(data.d).each(function (index, id) {
                        partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
                    });
                },
                error: function (err) {
                    console.log(err);
                }
            });
        });
    }
};

getInfo.init();

Now you can change your html to:

<input id="btnSearch" type="button" value="Find ID" class="button-ffe" />

That should work.

Answer 4

在 xml 中使用 focusableInTouchMode=false 它对我有用