Question

这一直困扰着我。我试图在函数中创建一个单击事件，这似乎不起作用。这是基本布局：

function init() {

$('#a2').click(function() {
//does some stuff. Works fine.

    $('#addDest').click(function() {
    //does more stuff. Works fine…
        if ($("#input2").is(':visible'))     
        {alert("test");};
     });
});
};

页面总是假设＃input2可见！即使它正在打开和关闭。我检查了Firebug，它能够知道真相。但是，当我点击＃input2时，警报会一直弹出！我可以将我的问题部分抛出函数之外。但这会产生更多问题 - 因为当文档加载时我会有一些未声明的变量。我想我做了很长的路，也许事件处理程序或clickevents是更多的解决方案。但我还没达到那么高的理解水平。我知道它正在读取该问题区域，就像页面加载时一样。这个问题有更简单的解决方案吗？我知道我非常需要了解更多...非常感谢!!

Answer 1

使用此标记：

<button id="a2">A2</button>
<button id="addDest">Add</button>
<input type="text" id='input2'>

和这个CSS：

#addDest,#input2{display:none;}

这有效：

$('#a2').click(function() {
    $('#addDest').show();
});
$('#addDest').click(function() {
    if ($("#input2").is(':visible')) {
        alert("test");
    };
    $('#input2').show();
});

说明：

假设所有元素都存在，即使是隐藏的。
由于它是隐藏的，你可以在a2的click事件处理程序之外添加addDest的click事件，因为如果它被隐藏起来就不会被点击。
在我的示例中，input2最初是隐藏的，因此您只能在第二次单击时看到警报（我在addDest的第一个单击事件处理程序中显示它。）

如果您更改

  $('#input2').show();

为：

$('#input2').toggle();

您可以根据输入的可见性看到它发生变化。

工作示例：http://jsfiddle.net/25Vfy/

Answer 2

问题可能是#addDest上的click事件被反复绑定。在绑定之前尝试执行$('#addDest').unbind("click")

Answer 3

你可以尝试这样的事情

$('#a2').click(function() {
    $(this).attr('data-clicked','true'); 
});


$('#addDest').live('click', function() {

    if ($("#input2").is(':visible') && $('#a2').attr('data-clicked') == 'true')     
    {alert("test");};
 });

如果您希望它仅在第一次点击时发出警报

$('#a2').click(function() {
    $(this).attr('data-clicked','true'); 
});

$('#addDest').live('click', function() {

    if ($("#input2").is(':visible') && $('#a2').attr('data-clicked') == 'true'){

           if($(this).attr('data-clicked') != 'true'){
              $(this).attr('data-clicked','true'); 
              alert("test");
           };
     }
});

在另一个函数中添加单击事件

3 个答案: