Choose an"> Choose an"> Choose an" />

jqueryモバイルポップアップ効果を動的にリンクに追加する方法

jqueryモバイルでは、以下の例のようにポップアップを開くことになっている a タグを動的に追加します。しかしそれは動的に追加されるので、jqueryモバイル効果はそれに影響しません。どうやってこのように動作させることができますか?

ありがとう

Actions...
<div data-role="popup" id="popupMenu" data-theme="b">
        
</div>
0

5 答え

There is a demo available in jQuery mobile documents Dynamically create popup

次の私はJavaScriptで簡単なHTMLタグを書き、それからjqueryモバイルページに追加します。

html:

 <div data-role="page">
    <div data-role="content" id="forpopup">
    </div>
<div>

Here is the Fiddle Demo.

i hope this will be helpful.

0
追加された

There is a demo available in jQuery mobile documents Dynamically create popup

次の私はJavaScriptで簡単なHTMLタグを書き、それからjqueryモバイルページに追加します。

html:

 <div data-role="page">
    <div data-role="content" id="forpopup">
    </div>
<div>

Here is the Fiddle Demo.

i hope this will be helpful.

0
追加された

私が正しく理解していれば、あなたはボタンを動的に追加したいと思うでしょう。

class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"

HTMLを追加した後にjQuery Mobileの機能強化を適用するには、ウィジェット作成メソッドを呼び出す必要があります。 code> .listview(); など)

を呼び出すボタンを動的に作成する方法を示す JSFiddle を追加しました。 .button()と、ハードコードされたクラスを適用すること(これは良いことではないと思います)。

0
追加された

私が正しく理解していれば、あなたはボタンを動的に追加したいと思うでしょう。

class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"

HTMLを追加した後にjQuery Mobileの機能強化を適用するには、ウィジェット作成メソッドを呼び出す必要があります。 code> .listview(); など)

を呼び出すボタンを動的に作成する方法を示す JSFiddle を追加しました。 .button()と、ハードコードされたクラスを適用すること(これは良いことではないと思います)。

0
追加された

ページの初期ロード後にHTMLをページに追加した場合は、イベントが発生したときに機能するように、jquery関数を再適用する必要があります

例...

あなたが現在このようなものを持っているならば:

    <script type="text/javascript">
    $(document).ready(function() {
      $('a').on('click', function() {
            //something
            return false;
        });
    });
    </script>

This will do //something whenever the user clicks on any < a > link. Now that you are loading the new < a > links in after the document is ready, the code above will not apply to the new code as it was not on the page when the JavaScript applied the above code.

To fix this, you need to run the function that does the //something again after the new < a > has been loaded.

    <script type="text/javascript">
    $(document).ready(function() {

            somethingFunction();

        });
    });

    //this is where we put the code to apply an event, it is now recallable later on.
    function somethingFunction(){
    $('a').on('click', function() {
            //something
            return false;
        });
    }
    </script>

Assuming that you are pulling in the new < a > html via an ajax query, you would need to call the somethingFunction() after the ajax query is successful

例えば

$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
    $('.popups').html(data);
    somethingFunction();//THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript