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 对我有用

第一次点击时，按钮onclick事件未触发

4 个答案: