2012-12-01 20 views
7

Ich habe ein Problem mit einer einfachen JQuery Mobile App. Alles läuft darauf hinaus, dass das Click-Ereignis zweimal ausgelöst wird.jquery Mobile Click Ereignis zweimal ausgelöst

Keine Lösung für ähnliche Probleme hat dieses Problem behoben.

Das Problem tritt auf, egal ob auf dem Gerät bereitgestellt oder im Browser angezeigt wird.

Hier ist der Code

<title></title> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, user-scalable=no" /> 

<script src="jquery-1.8.2.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
<script src="cordova-2.2.0.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).bind("mobileinit", function() { 
     $.support.cors = true; 
     $.mobile.allowCrossDomainPages = true; 
    }); 
</script> 

<link rel="Stylesheet" href="jquery.mobile-1.2.0.min.css" /> 

<div> 
    <input type="button" id="ButtonSubmit" value="Save" /> 
</div> 

<script type="text/javascript"> 


    $("#ButtonSubmit").click(function() { 
     alert('Clicked'); 
    }); 

</script> 

+0

Die gewinnende Antwort hier funktioniert für mich: https://stackoverflow.com/questions/12052132/jquery-mobile-click-event-binding-twice – DOK

Antwort

3

Sie lösen können, dass unter Verwendung von Art und Weise erwähnt.

Verwenden zunächst unbind und dann binden wie unter :

<script type="text/javascript"> 

    $("#ButtonSubmit").unbind('click').bind('click', function() { 
      alert('Clicked'); 
      return false; //to prevent the browser actually following the links! 
     }); 

</script> 

Update: Wenn Sie auf Methode sind, die dann könnten Sie ist als unten.

Hinweis: Wenn Sie off Methode verwenden es vorig Ereignishandler zu entfernen und mit auf Methode fügt es neue one.B'cos der, dass es nicht erlaubt 2 mal passieren klicken.

<script type="text/javascript"> 

$('#ButtonSubmit').off('click').on('click', function(){ 

    alert('Clicked'); 
    return false; //to prevent the browser actually following the links! 
}); 

</script> 
+0

+1 Sehr nett. Aber warum passiert es? Warum '.on ('click')' zweimal ausgelöst wird? – Omar

+0

@Omar Plz überprüfen Sie meine Update-Abschnitt für weitere Details. – Sampath

+1

Nicht für mich arbeiten –

0

Haben Sie versucht, die Standardaktion zu verhindern?

0

Wenn Ihr onclick-Handler zweimal feuert, ist es wahrscheinlich, dass Ihr Handler zweimal registriert wird. Sie können eine Protokollierung hinzufügen, bevor Sie den Handler registrieren, um zu bestätigen, dass dies der Fall ist. Dann können Sie debuggen, warum es zweimal registriert wird.

2

Es gibt viele experimentelle Sachen passiert in der neuesten jQuery Mobile mit dem Brennen Click-Ereignisse, die wahrscheinlich diese Probleme verursacht wird (Linie 2689):

// This plugin is an experiment for abstracting away the touch and mouse 
// events so that developers don't have to worry about which method of input 
// the device their document is loaded on supports. 
// 
// The idea here is to allow the developer to register listeners for the 
// basic mouse events, such as mousedown, mousemove, mouseup, and click, 
// and the plugin will take care of registering the correct listeners 
// behind the scenes to invoke the listener at the fastest possible time 
// for that device, while still retaining the order of event firing in 
// the traditional mouse environment, should multiple handlers be registered 
// on the same element for different events. 
// 
// The current version exposes the following virtual events to jQuery bind methods: 
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel" 

http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js

So wie ich es behoben war:

$('#mobileMenuItem').off('click'); 

und dann begann es normal zu funktionieren.

1

Ich denke, das hängt damit zusammen, wie Sie mit Ihren Ereignissen umgehen. dh mit paginit.

Auch eine Seite mit verschiedenen Daten-URL möglicherweise ausgeblendet, so dass die gleiche js läuft auch egal was.

In Ihrem Code, ich würde

<script type="text/javascript"> 
    $(document).off('click').on('click', '#ButtonSubmit', function() { 
     alert('Clicked'); 
    }); 
</script> 

Auf diese Weise folgende Änderung tun, weiß ich, dass ich einmal binden.

Verwandte Themen