jquery函数阻止其他人开火答案

【问题标题】：jquery function stops others from firingjquery函数阻止其他人开火
【发布时间】：2016-05-24 11:03:52
【问题描述】：

我正在构建一个登录/加入表单，该表单涉及一次输入一个字段（在模式样式框中），该表单很快被另一个字段替换。

这一切都可以完美运行，直到我添加用于在模式框外单击的代码，如下所示

$(document).ready(function(){
    $("#loginJoinBackground").click(function(){
        $("#loginJoinBackground").fadeOut(300,function(){});
    });

    $("#logins-box").click(function(){
        event.stopPropagation();
    });
});

现在，这也适用于它应该做的事情。问题是，当我输入该代码时，它会阻止其他函数触发。我有什么明显的遗漏吗？

编辑：我正在使用流星，所以也许这可能会影响不同的事情，由于上述原因而无法触发的代码如下：

$(document).on("click", "#loginB", function(){

logMeIn($("#logU").val(), "");
})
 function logMeIn(emailVar, passwordVar = ""){
 Meteor.loginWithPassword(emailVar, passwordVar, function(err){
  console.log(err.reason);
  if(err.reason == "Incorrect password"){
        event.preventDefault();
        $("#spanEmailLogin").hide("slide", { direction: "left" }, 200);
        $("#spanPasswordLogin").show("slide", { direction: "right" }, 200);
        $("#logP").focus();
  }



  else{
    event.preventDefault();
    $("#spanEmailLogin").hide("slide", { direction: "left" }, 200);
    $("#spanPasswordLoginForm").show("slide", { direction: "right" }, 200);
    $("#passwordForm").focus();
  }
});


  }

【问题讨论】：

也想检查您的 HTML
将事件对象传递给点击回调。 $("#logins-box").click(function(){ ==> $("#logins-box").click(function(event){
@Rivz11 检查浏览器控制台输出是否有错误？
@Tushar 我已经尝试过了，但不幸的是仍然有问题，在我的问题中添加了一些关于代码无法触发的问题......黑曜石没有错误出现，只是提交时没有任何反应阶段：/
我认为您缺少函数的事件参数。要使 event.stopPropogation() 起作用，必须有一个事件参数！

标签： javascript jquery node.js meteor

【解决方案1】：

您是否尝试调用 preventDefault() 方法而不是 stopPropagation() ？

$(document).ready(function(){
    $("#loginJoinBackground").click(function(){
        $("#loginJoinBackground").fadeOut(300,function(){});
    });

    $("#logins-box").click(function(e){
        e.preventDefault()
        //event.stopPropagation();
    });
});

【讨论】：

stopProppagation 可能是触发此点击事件时未触发任何其他事件的原因。因为 stopPropagation 在执行后停止冒泡任何其他事件。
不幸的是，它不起作用 - 在模式内部单击会导致它在该实例中关闭。
@ArpitJain 确实 - 我尝试使用 return false 而不是 stopPropagation，奇怪的是，它与问题中提到的结果相同..

【解决方案2】：

$(document).ready(function(){
 $("#loginJoinBackground").click(function(){
 $("#loginJoinBackground").fadeOut(300,function(){}); });
 $("#logins-box").click(function(event){
event.stopPropagation(); 
}); 
});

这可能工作我不确定

【讨论】：

【解决方案3】：

click 事件不需要 jquery。你应该使用Template.events

试试这个并告诉我：

Template.youTemplate.events({
  'click #loginB': function (e,t) {
    var emailVar = t.find('#logU').value
    var passwordVar = t.find('#logP').value
    Meteor.loginWithPassword(emailVar, passwordVar, function(err){
      console.log(err.reason);
      if(err.reason == "Incorrect password"){
        e.preventDefault();
        $("#spanEmailLogin").hide("slide", { direction: "left" }, 200);
        $("#spanPasswordLogin").show("slide", { direction: "right" }, 200);
        $("#logP").focus();
      } else{
        e.preventDefault();
        $("#spanEmailLogin").hide("slide", { direction: "left" }, 200);
        $("#spanPasswordLoginForm").show("slide", { direction: "right" }, 200);
        $("#passwordForm").focus();
      }
    });
  }
});

【讨论】：

非常感谢@yudap，这几乎成功了，只是无法检测到 emailVar 和 passwordVar 的值。所以我只是在你的建议中添加了几行，它奏效了！我在点击事件之后和 Meteor.loginWithPassword 位之前添加的行： var emailVar = document.getElementById("logU").value; var passwordVar = document.getElementById("logP").value;
@Rivz11 不需要document.getElementById。它将搜索整个文档。这会变慢！为了更快，使用流星方式在定义的模板中查找 id。查看修改后的答案