事件处理程序是否应该是方法中的最后一句话

我有一种方法，称为某些元素的onclick。在该功能中，我有一个事件处理程序（jquery $（）。click（）），检测单击按钮并执行一些操作。

我已经注意到，只要事件处理程序是函数中的最后一个语句块，并且如果在某些代码块之后，则可以完全跳过。为什么会发生？

编辑添加代码

  function launchPopUp(ID) {
            if ($('#popUp').is(':hidden')) {
                var serial = ID.id; // ID of the element or area clicked.
                var headData = 'SVG PopUp';
                var entData = 'Enter the data you want to store:';
                var ok = "No";
                var input = "";
                var header = addHeader(headData);
                var enterable = addEnterable(entData);
                var buttons = addButtons();
                $('#popUp').append(header);
                $('#popUp').append(enterable);
                $('#popUp').append(buttons);
                $('#popUp').show();
                $('#btnSubmit').click(function() {
                    input = document.getElementById('txtData').value;
                    if (input != "") {
                        ok = "yes";
                        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                        closePopUp();
                    }
                });
                var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
                collection.push(collData);
            }  
        }

在.click（）

之后，控制

您正在误解事件处理程序。

JavaScript具有异步性，因此（在正常情况下）没有"等待"事件。

您像click()一样注册EventHandler，然后在（最终）单击该元素注册时执行该功能。同时，执行您的代码的其余部分还在继续。

如果要使您的代码取决于单击，则必须将此代码写入点击处理程序的功能或将回调传递给该功能。

注册事件操纵器是一个一次性过程，必须在您的功能之外完成 - 目前您每次调用launchPopUp时都注册新的点击操作员。例如。如果您五次调用launchPopUp，则代码

input = document.getElementById('txtData').value;
if (input != "") {
    ok = "yes";
    $(ID).css('fill', 'green'); 
    closePopUp();
}

单击#btnSubmit。

基本上，您必须如下构建代码：

#btnSubmit的注册EventHandler-定义此功能中单击按钮（评估输入）
编写最终执行的launchPopUp函数。这里没有EventHandler，btnSubmit上没有评估代码，这是您的EventHandler中完成的。

我认为这就是您想要的：

function launchPopUp(ID) {
        if ($('#popUp').is(':hidden')) {
            var serial = ID.id; // ID of the element or area clicked.
            var headData = 'SVG PopUp';
            var entData = 'Enter the data you want to store:';
            var ok = "No";
            var input = "";
            var header = addHeader(headData);
            var enterable = addEnterable(entData);
            var buttons = addButtons();
            $('#popUp').append(header);
            $('#popUp').append(enterable);
            $('#popUp').append(buttons);
            $('#popUp').show();
            var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
            collection.push(collData);
            $('#btnSubmit').click(function() {
                input = document.getElementById('txtData').value;
                if (input != "") {
                    collData.OK = "yes";
                    $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                    closePopUp();
                }
            });
        }  
    }

请注意，Colldata是一个包含对象的引用的变量。该对象被添加到集合中，并在单击BTNSUBMIT按钮时在单击处理程序中进行了修改。这样，如果从未单击保存按钮，则该对象仍将添加到collection中。但是，如果单击它，则将对象更改，并调用closePopUp()，大概允许您对collection变量中存在的对象进行操作。

 $('#btnSubmit').click(function() {
                    input = document.getElementById('txtData').value;
                    if (input != "") {
                        ok = "yes";
                        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                        closePopUp();
                    }
                });

将上面的LoadPopup功能放在外部，然后将其放入

中

$(document).ready(function()
{
});

可能只是解决它。

编辑：

$('#btnSubmit').click(function()
{
    input = document.getElementById('txtData').value;
    if (input != "")
    {
        ok = "yes";
        $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
        closePopUp();
    }
    var collData = { "ID": serial, "header": headData, "OK": ok, "input": input };
    collection.push(collData);
});

var colldata应该在您的点击函数中，然后单击"提交"按钮时将执行。

如果我正确理解上述代码将无法正常工作。看起来每次启动弹出窗口时，都可以将新的点击事件绑定到它。因此，如果您两次启动同一弹出窗口，则在单击事件处理程序上有两个绑定到对象的事件。

访问关闭外的变量是实用的。但是，您只能在定义关闭之前访问已定义的变量。

想象一下，在定义点击事件处理程序后，您将"确定"的定义移动。在这种情况下，OK将无法定义，并且在事件处理程序中将有另一个确定。

（我希望我正确理解您的问题，请否则评论）

尝试以下：

var launchPopUp = function launchPopUp(ID) {
    'use strict';
    var popup = $('#popUp'), //cache #popup instead of doing multiple lookups
        headData = 'SVG PopUp',
        entData = 'Enter the data you want to store:',
        submit = null, //declare a var to cache #btnSubmit instead of doing multiple lookups
        submitHandler = function (e) { //handler can be defined anywhere in this routine
            //collData should be defined in the handler
            var collData = {
                "ID": ID.id, // ID of the element or area clicked.
                "header": headData,
                "OK": "No",
                "input": document.getElementById('txtData').value
            };
            //modify collData based on inputs at time #btnSubmit is clicked.
            if (collData.input !== "") {
                collData.OK = "yes";
                $(ID).css('fill', 'green'); // Change colour to green only if some valid data is entered.
                closePopUp();
            }
            collection.push(collData);
        };
    if (popup.is(':hidden')) {
        popup.append(addHeader(headData));
        popup.append(addEnterable(entData));
        //if addButtons() defines/creates/adds #btnSubmit then you will need
        //to attach the handler after #btnSubmit exists in the DOM
        popup.append(addButtons());
        //once #btnSubmit is in the DOM, you can add the handler at any time
        //although I recommend doing it prior to showing #popup
        submit = $('#btnSubmit'); //cache #btnSubmit
        if (!submit.data('handlerAttached')) {
            //only need to attach the handler one time.
            //also note that attaching the handler does not fire the handler
            //only clicking the button, or calling the handler (i.e., submit.click()
            //or submitHandler(), etc.) will fire the handler.
            submit.click(submitHandler);
            //set flag to indicate that the handler has been attached.
            submit.data('handlerAttached', true);
        }
        popup.show();
    }
};

另外，只要这些都在其他地方定义：

addEnterable()
addButtons()
addHeader()
closePopUp()
collection[]

您的例行程序不应有任何错误阻止执行处理程序。

相关内容

最新更新

热门标签：