0

我有一个名为 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() 之后直接跳转到代码块

4

5 回答 5

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

于 2012-11-02T11:43:14.673 回答
1

您误解了事件处理程序。

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

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

如果您想让您的代码依赖于点击，您必须将此代码写入点击处理程序的函数或将回调传递给该函数。

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

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

一旦你点击 ，也会被执行五次#btnSubmit。

基本上你必须像下面这样构造你的代码：

  1. 注册事件处理程序#btnSubmit- 定义在此函数中单击按钮时发生的情况（评估您的输入）
  2. 编写launchPopUp最终执行的函数。这里没有事件处理程序，也没有评估代码btnSubmit都在你的事件处理程序中完成。
于 2012-11-02T12:44:52.430 回答
0 
 $('#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 应该在你的点击函数中，然后当你点击提交按钮时它会被执行。

于 2012-11-02T10:44:14.720 回答
0

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

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

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

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

于 2012-11-02T11:06:25.217 回答
0

试试这个：

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

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

于 2012-11-02T12:38:30.483 回答