2012-02-21 9 views
4

にタップイベントをバインド:jqueryの(モバイル) - 私はこのHTML持っている場合はdivの

<div id="myDiv"></div> 

と、このCSS:

#myDiv{ 
    background:url('../images/someImage.png') no-repeat; 
    background-size:100%; 
    width:44px; 
    height:44px; 

} 

を、私はときに、ユーザータップ新しいページを開く必要がありますon myDiv。私はこれを持って外部JSファイルがあります。

function bindMyDiv(){ 
    $("#myDiv").bind('tap',function(event, ui){ 
     alert("binding"); 
    }) 
} 

をしかし、HTMLからこれを呼び出すためにどこ私は理解していない、またはこれはこのについて移動する正しい方法が偶数の場合。助言?

答えて

0

イベントが存在するページのpageinitイベントでその関数を呼び出すとします。あなたはpagecreatepageshowなどのようなjQuery Mobileの他のページイベントを使うことができますが、私はpageinitがあなたのベストベットだと思います。

$(document).delegate('#page-id', 'pageinit', function() { 
    $("#myDiv").bind('tap',function(event, ui){ 
     alert("binding"); 
    }) 
}); 

OR

$(document).delegate('#page-id', 'pageinit', bindMyDiv); 

あなたのdiv要素が存在するdata-role="page"要素のIDで#page-idに代わる:

実装は次のようになります。

このメソッドは、#myDivエレメントのイベント委譲よりも優先されます。エレメントに直接バインドすると、イベントがトリガーされたときのオーバーヘッドが少なくなるからです。イベント委任を使用する場合、イベントは委任ルートにバブルアップする必要があります。

1

$("#myDiv").live("tap", function(event){ 
    alert('binding'); 
}); 

は、あなたが側でこれを置くことができます試してみてください、あなたのjavascriptファイルonReady

編集:ここにあなたが処理するために、さまざまなソリューションにかなり良い洞察を提供し

http://jsfiddle.net/R9e6u/

+1

あなたは 'document.ready'イベントハンドラ内であることを配置する必要はありませんこれはイベント委譲であるため、常に利用可能な 'document'要素に直接バインドします。 '.live()'では '.delegate()'が優先され、jQuery 1.7では '.live()'が償却されます。 – Jasper

+0

現在正しいですが、現在jQueryは1.6.4までサポートされており、 'on'の代わりに' live'を使用しています – Bot

+0

これは '.delegate()'のドキュメントからです: 'jQuery 1.7の時点で、.delegate()は.on()メソッドに取って代わられます。しかし、以前のバージョンでは、イベント委譲を使用するもっとも効果的な方法が残っていました。したがって、jQuery 1.4.2以降を使用している場合、jQueryチームは '.delegate()'の使用を推奨します。 – Jasper

1

みんなあなたのスクリプトは、しかし、私は誰もあなたのスクリプトを改善するために役立つと思うと思っていたとは思わない。 "これが正しかったのかどうかわかっていれば"、答えはノーです。おそらく私は単純化しすぎていますが、JQMを使ってdiv(またはその問題のDOM要素)を開こうとすると、アンカータグを囲むだけで新しいページを開くことができます(またはその中で適切なもの)とあなたのhref="#myNewPage"へのhrefとあなたがid="myNewPage"

はjQueryのモバイルのフレームワークが自動的に滑らかUXを提供するために、通常のHTML要素にJS & AJAXを注入するように設定されているにロードしたいJQMページでIDを設定します。タッチイベントのバインディングが必要な場合がありますが、このような状況では、コードのレベルは保証されません.jQuery Mobileの美しさ=)。タッチイベントをバインドするときの

例:ショー/ DOMオブジェクトを非表示にし、プラグインのクリックを誘発するなど

+0

彼は新しいjqmページにリンクしたくないので、それを関数にバインドする必要があります。 – netalex

関連する問題