Question

使用事件调用时，我的jQuery函数不会触发。

如果我把我的功能放在事件之外，一切都很完美，没有错误。

但是，如果我试图通过事件触发它，特别是提交或点击，没有任何反应，我也没有任何错误。

我正在使用Cordova，但是当我在计算机上的测试服务器上测试时，会出现同样的问题。

我的Cordova文档

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <!-- Load jQuery-->
    <script src="js/jquery.min.js" type="text/javascript"></script>

    <!-- Load My JS Plugins -->
    <script src="js/login.jQuery.js" type="text/javascript"></script>

    <!-- jQuery Variables and other code used across the plugins-->
    <script type="text/javascript">
    $(document).ready(function()
      {
          document.addEventListener("deviceready", onDeviceReady, false);

          function onDeviceReady()
          {
              navigator.geolocation.getCurrentPosition(onSuccess, onError);
          }

          function onSuccess(position)
          {
             //Trigger My Functions
             $("#login").submit(function()
             {
                 $(this).login();
             });
          }

          function onError(error)
          {
              alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
          }
    }
 });
     </script>
</head>

<body>
    <div id="deviceready">
      <div class="loginstuff">
          <form id="login">
              <h2>Login to your Account</h2>
              <label>Username</label>
              <input id="username"placeholder="Username" autocapitalize="off" autocorrect="off" type='text'>
              <br>
              <label>Password</label>
              <input id="password" placeholder="********" type='password'>
              <br>
              <input type="submit" value="Login">
            </form>
        </div>
    </div>
</body>
</html>

注意 - 我知道这个插件很简单，但我只是用它进行测试。一旦我知道它可以解雇，我会将其切换回来

(function ($) {
    $.fn.extend({
        login: function()
        {
            alert("yes");
        }
    });
})(jQuery);

修改的

所以我在jsFiddle中测试了这个函数，一切都运行得很好。基本上，现在我知道我的函数按原样工作，但事件没有触发。想让每个人都知道。

Answer 1

在注册事件处理程序以侦听事件之前，“deviceready”事件是否会发生？也许在$（document）.ready（）内部回调为时已晚？

我不喜欢科尔多瓦的documentation因为他们有相互矛盾的建议。一方面，他们告诉你在添加事件监听器之前等待DOM准备好，但是他们会在加载DOM之前显示在HEAD中添加监听器的示例。

这种方法有点长，但如果你有一个竞争条件，其中deviceready有时会在$（document）.ready（）之前触发，这可能是一个有效的解决方案。

你可以在你的HEAD标签中尝试这样的事情：

<head>
<script type="text/javascript">
var haveGeoLocation, isDomReady;

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

function onSuccess(position) {
  //Trigger My Functions
  haveGeoLocation = true;
  configLoginSubmit();
}

function onError(error) {
  alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}

// configLoginSubmit() will be called from both onSuccess and $(document).ready()
// but will not attempt it's business until both states are satisfied.
function configLoginSubmit() {
  if (isDomReady && haveGeoLocation) {
    $("#login").submit(function() {
      $(this).login();
    });
  }
}

$(document).ready(function() {
  isDomReady = true;
  configLoginSubmit();
}
</script>
</head>

jQuery不会触发事件上的函数

1 个答案: