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

Question

我已经检查并阅读了几篇关于这个问题的文章并尝试了一些东西，但似乎没有任何效果。 问题是第一次单击按钮时什么也没有发生。 第二次点击它时，事件和ajax请求被触发。 除了必须两次单击按钮之外，ajax 数据还被请求并显示两次。 我看过几篇文章，说检查按钮的可见性，以及在这种情况下是否检查关闭/打开另一个元素的可见性。 另外，我有按钮的 onclick 调用方法来触发 ajax。 奇怪的是，当我从方法中删除代码并将其放入 DOM 准备好事件第一次触发但我的 ajax 数据永远不会返回

按钮 HTML ：

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

这是点击代码：

    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

您在第一次单击时附加了事件，因此代码会像您编写的那样运行。

您可以删除第一个函数定义：

    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

因此，第一次单击将运行 GetInfo() - 它添加了一个 jQuery 单击侦听器（但不运行它）

然后第二次单击运行在单击侦听器中定义的函数 - 和 GetInfo - 它添加了 jQuery 东西的另一个实例

然后第三次点击运行在点击监听器中定义的函数，两次 - 和 GetInfo - 它添加了 jQuery 东西的另一个实例

Answer 3

您的 jQuery 单击函数在您的GetInfo()函数中。 将您的 JS 更改为：

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();

现在您可以将您的 html 更改为：

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

那应该工作。

Answer 4

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