Question

我有一个名为onClick of some元素的方法。在该函数中，我有一个事件处理程序（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（）

之后，控件直接跳转到代码块

Answer 1

我认为这就是你想要的：

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变量中存在的对象执行所需操作。

Answer 2

您误解了事件处理程序。

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

您注册了一个类似click()的事件处理程序，然后在（最终）注册该元素时执行该函数。与此同时，其余代码的执行仍在继续。

如果要使代码依赖于单击，则必须将此代码写入单击处理程序的函数或将回调传递给函数。

注册事件处理程序是一次性过程，必须在您的函数之外完成 - 每次调用launchPopUp时注册新的点击处理程序。例如。如果你打电话launchPopUp五次，你的代码

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

单击#btnSubmit后，

也会被执行五次。

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

为#btnSubmit注册eventhandler - 定义在此功能中单击按钮时发生的事情（评估输入）
编写最终执行的launchPopUp函数。此处没有事件处理程序，btnSubmit上没有评估代码，这一切都在您的事件处理程序中完成。

Answer 3

 $('#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应该是你的点击功能，然后当你点击提交按钮时它会被执行。

Answer 4

如果我理解正确的话，上面的代码将无效。看起来每次启动弹出窗口时都会将新的click事件绑定到它。因此，如果您两次启动相同的弹出窗口，则会有两个绑定到该对象的单击事件处理程序。

在闭包之外访问变量是切实可行的。但是，您只能在定义闭包之前访问已定义的变量。

想象一下，在定义click事件处理程序后移动“ok”的定义。在那种情况下，OK将不会被定义，并且事件处理程序中将有另一个ok。

（我希望我理解你的问题是正确的，否则请另外评论）

Answer 5

试试这个：

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[]

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

事件处理程序应该是方法中的最后一个语句吗？

5 个答案: