2012-12-01 16 views
7

シンプルなJQueryモバイルアプリケーションに問題があります。それはすべて、クリックイベントの発射まで2回続いています。jqueryモバイルクリックイベントが2回発生する

この問題は解決できません。

問題は、デバイスにデプロイするかブラウザで表示するかにかかわらず発生します。

は、ここでは、コード

<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> 
0です

<script type="text/javascript"> 


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

</script> 

+0

勝利の答えは私のために働いた:https://stackoverflow.com/questions/12052132/jquery-mobile-click-event-binding-twice – DOK

答えて

3

あなたは、以下の使用して道を言及したことを解決することができます。 以下のような

使用まずバインド解除してからバインド

<script type="text/javascript"> 

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

</script> 

更新:あなたが法上のを抱えているなら、あなたは使用することができます以下の通りです。

注:あなたはそれが前のクリックイベントハンドラを削除し、それが2回をクリック起こることを許可していないことの新しいone.B'cosを追加法上のています方法オフを使用しています。

<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非常に良い。しかし、なぜそれは起こっているのですか?なぜ '.on( 'click')'が2回発射されるのですか? – Omar

+0

@Omar Plz詳細については、私の更新セクションをチェックしてください。 – Sampath

+1

私のために働いていない –

0

デフォルトのアクションを防止しようとしましたか?あなたのonclickハンドラが二回発射された場合

<script type="text/javascript"> 
    $("#ButtonSubmit").click(function (e) { 
     e.preventDefault(); 
     alert('Clicked'); 
    }); 
</script> 
0

は、それはあなたのハンドラが二度登録されている可能性があります。これが起こっていることを確認するためにハンドラを登録する直前にいくつかのログを追加することができます。次に、それがなぜ2回登録されるのかをデバッグすることができます。

2

は実験のものの多くは、おそらく、これらの問題を引き起こしているの発射クリックイベントで、最新のjQueryのモバイル、で起こってあります(ライン#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

方法:

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

であり、正常に機能し始めました。

1

これはあなたのイベントをどのように処理するかに関係していると思います。つまり、pageinitを使用します。

また、別のdata-urlを持つページが非表示になっている可能性があります。同じjsも何に関係なく実行されます。あなたのコードで

、私はこのように次のように変更

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

をするだろう、私は一度バインドします知っています。

関連する問題