1

I'm using jquery mobile and within a <form> i have 'save' and 'edit' buttons (<a> tags with data-role="button"). Once the save button is clicked, a dialog/confirmation opens. In this dialog is the usual confirm/cancel options.

What I want to happen is once the 'confirm' is clicked and using data-rel="back" to go back to the form page, i want the save button to be disabled and the edit button, that was by default disabled, to become enabled.

HTML:

<!--save button--><a class="save_button" data-role="button" href="save.html" data-rel="dialog" data-transition="pop">Save/Enter Line-Up</a>
<!--edit button--><a class="edit_button" data-role="button" href="edit.html" data-rel="dialog" data-transition="pop">Edit Line-Up</a>

(save.html):

<div data-role="content">   

    <p>Do You Want To Save?</p>

    <a class="confirm_button" href="#" data-role="button" data-rel="back">Confirm</a>
    <a class="cancel_button" href="#" data-role="button" data-rel="back">Cancel</a>

</div><!-- /content -->

JS:

$(document).ready(function() {

$('.edit_button').addClass('ui-disabled');
        /*edit button*/

    $('.confirm_button').on("click", function() {
      $('.edit_button').removeClass('ui-disabled');
      $('.save_button').addClass('ui-disabled');
    });
});

I cannot get this to work. The above JS works if I don't leave the page (i.e. if the confirm button was on the same page as the save and edit buttons). But once i open the dialog it doesn't work.

Thanks in advance for any help.

4

2 に答える 2

2

あなたは1つの重要なことに言及していませんでした。私が持っているものから、あなたはいくつかのhtmlファイルを使用しています。ご存じないかもしれませんが、jQuery Mobile の動作は他のページとは少し異なります。主に最初のページが読み込まれると、その完全なコンテンツが DOM (HEAD と BODY) に読み込まれます。ただし、他のページから読み込まれるのは BODY だけです。考えてみれば、これは通常の状況です。DOM 内に既に HEAD がある場合、他のページの HEAD をロードする必要はありません。

あなたの場合、JavaScript がページ間で分離されている場合、それが HEAD 内に配置されている場合、(残りの HEAD コンテンツと共に) 破棄されます。ここでは、それを修正する方法を見つけることができます。

すべての JavaScript が既に最初の HTML ファイル内に配置されている場合、別の問題が発生します。jQuery Mobile でイベントをバインドする場合は、委任されたバインドを使用することをお勧めします。基本的にあなたのコードを見てください：

$('#confirmButton').on('click', function(){

});

ボタンが DOM にロードされる前にこのイベントがバインドされた場合、その後は機能しません。これを修正するには、委任されたバインディングを使用する必要があります。この場合、要素が DOM 内に存在するかどうかは問題ではありません。これは、イベントがいくつかの perenet 要素またはより良いドキュメントにバインドされるためです。

$(document).on('click', '#confirmButton',function(){

});

最後に一つだけ。可能であれば、jQuery Mobile で準備されたドキュメントを使用しないでください。ページが DOM に読み込まれる前にトリガーされることがあります。しかし、修正があります。jQuery Mobile の開発者は、この問題を解決するためにページ イベントを作成しました。詳細については、こちらをご覧ください。

もう 1 つあります。3 種類の jQuery Mobile ボタンと、それらを無効にする 2 つの方法 (1 つだけではありません) があります。詳細については、こちらを参照してください。

于 2013-05-24T08:21:00.343 に答える
0

さて、私はあなたの問題をできる限り再現しましたが、問題はないようでした. しかし、いくつかのバリエーションの後、ボタンを無効にできない状況が1つ発見されました。

確認ボタンでクラスを使用しなかったため、すべて機能しているように見えました。それにIDを付けてください。解決する必要があると思います。

<a class="confirm_button" id="confirmButton" href="#" data-role="button" data-rel="back">Confirm</a>

そして、あなたのjsで：

$('#confirmButton').on('click', function(){
   $('.edit_button').removeClass('ui-disabled');
   $('.save_button').addClass('ui-disabled');
});

私の試みによると、これは今うまくいくはずです。

于 2013-05-24T07:55:34.460 に答える