2

いくつかの折りたたみ可能なアイテムを含む折りたたみ可能なセットを入手しました。すべての折りたたみ可能なアイテムのシャウトには、onclick イベントを持ついくつかのボタンがあります。

    <div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
    <div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='false'>
        <h3>Title
            <div style='float:right;'>
                <input type='button'  data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' onclick='test(43);'/>
                <input type='button' value='Delete' data-theme='b' data-mini='true' data-inline='true' data-icon='delete' onclick='test(45);' class='splitButtonClicked'/>
            </div>
        </h3>
        CONTENT
    </div>
</div>


function test(value){
    alert(value);
    return false;
}

onclick イベントは、1 つ以上のパラメータを指定して関数を呼び出す必要があります。イベントはうまく機能しますが、イベント後にリストビュー アイテムが崩壊します。これはあってはならないことです。

どうすれば崩壊を中断できますか?

よろしく

4

2 に答える 2

2

インライン JavaScript like onclick=...は と一緒に使用しないでくださいjQuery Mobile。この問題を防ぐには、クリック イベントをボタンにバインドし、恋人レベルへの伝播を防ぐ必要があります。

これが実際のjsFiddle例です：http://jsfiddle.net/Gajotres/z3hsb/

コード例:

$(document).on('pagebeforeshow', '#index', function(){    
    $('#first-button').bind('click', function(e) {       
        alert('First button');       
        e.stopPropagation();
        e.stopImmediatePropagation();          
    });    
    $('#second-button').bind('click', function(e) {    
        alert('Second button');   
        e.stopPropagation();
        e.stopImmediatePropagation();           
    });
});

このトピックについてさらに詳しく知りたい場合は、この記事をご覧ください。より透明性を高めるために、それは私の個人的なブログです。または、ここで見つけることができます。もう 1 つ、私の記事で、開発者は bind/live/delegate を使用してイベントをバインドするべきではないと述べましたが、ここでは bind がどのように機能するかdata-role="collapsible-set"、関数liveと相互作用するか、onここでは機能しないため、bind を使用する必要があります。

于 2013-02-01T11:41:55.563 に答える
1

Your function is returning false, but it isnt returned from its caller.

<input type='button' value='Delete' data-theme='b' data-mini='true' data-inline='true' data-icon='delete' onclick='return test(45);' class='splitButtonClicked'/>

try adding the return statement to the button mark up.

于 2013-02-01T11:17:16.680 に答える