0

My jQuery function is not firing when called with an event.

If I put my function outside the event, though, everything works perfectly and there are no errors.

But, if I try to trigger it with an event, specifically submit or click, nothing happens and I don't get any errors.

I'm using Cordova, but when testing this on a test server on my computer, the same issues happen.

My Cordova Doc

<!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>

NOTE - I know this plugin is simple, but I'm just using it for testing. Once I know it can be fired, I'll switch it back

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

EDIT

So I tested the function in a jsFiddle and everything worked perfectly. Basically, now I know my function works as is, but that the event is not firing. Wanted to let everyone know that.

4

1 回答 1

1

在您的事件处理程序注册以侦听事件之前，“设备就绪”事件是否会发生？也许在 $(document).ready() 回调中为时已晚？

我不喜欢 Cordova 的文档，因为他们的建议相互矛盾。一方面，他们告诉您在添加事件侦听器之前等待 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>
于 2013-09-03T04:25:33.757 回答