1

こんにちは私はnavbarに次のようなリストを持っています：

<div data-role="navbar">
            <ul id="mylist">
                <li onclick=getData() id="first"><a href="#">First</a></li>
                <li onclick=getData() id="second"><a href="#">Second</a></li>
                <li onclick=getData() id="third"><a href="#">Third</a></li>
                <li onclick=getData() id="four"><a href="#">Four</a></li>

            </ul>
        </div>

私はgetData関数を次のように持っています：

<script type="text/javascript">
function getData()
{
    console.log ("first line in getData>>>>");
    $("#first").live("click",function()
        {
            console.log("click on first>>>");
            chkTitle=$(this).text();                
             responseData();

        });


        $("#second").live("click",function()
        {
            console.log ("click on second>>>");
            chkTitle=$(this).text();                
             responseData();

        });

        $("#third").live("click",function()
        {
            console.log("click on third>>>");
            chkTitle=$(this).text();
            responseData();

        });

        $("#four").live("click",function()
        {
            console.log("click on four>>>");
            chkTitle=$(this).text();
            responseData();


        });




    }


</script>

初めてクリックしたときは、すべて問題ありません。しかし、2番目に仮定をクリックすると、1回印刷されます： "getData >>>>"の最初の行が2回印刷されます："2番目をクリック>>>"3回目に3回印刷されます。

getData >>>>の最初の行は1回だけ印刷されますが、live（ "click"、function（）データは毎回ますます印刷されます。なぜそうなのですか？

4

2 に答える 2

2

複数のクリックハンドラーを定義しているため、次のことを試してください。

 <li id="first"><a href="#">First</a></li>
 <li id="second"><a href="#">Second</a></li>
 ... 


$('#mylist li').click(function(){
    var id = $(this).attr('id');
    console.log("click on " + id);
    chkTitle = $(this).text();   
    responseData();     
})

デモ

于 2012-07-08T05:37:41.820 に答える
1

これを行うには、個別のIDに緊密にバインドすることが最善の方法かどうかはわかりません。理想的には、関数は再利用可能であり、data-属性や関数をもう少し切り離す何かなど、存在する他の情報（ID以外）に作用します。

.live()この関数は非推奨であり、非推奨になる前でさえ、一般的には棚上げされていたことにも言及する価値があり.delegate()ます。現在「推奨」されている構文では.on()、.delegate()まだ非推奨ではないエイリアスが使用されてい.on()ます。

onclick他の回答やコメントで述べられているように、関数呼び出しは必要ありません。次の（または未定義の）コードをドキュメント準備完了関数でラップすると、設定が完了します。

したがって、IDに緊密に結合している場合でも、これら2つのことは邪魔にならず、リスナーを次のulような要素にバインドします。

$('#mylist').on('click', 'li', function() {
  console.log('My ID is: ' + $(this).attr('id'));
});

または、さらに具体化するには、switch（または、その構文が必要な場合は一連のif / else ifステートメント...違いはありません）を使用できます。

$('#mylist').on('click', 'li', function() {
  var thisID = $(this).attr('id');
  switch (thisID) {
    case "first" :
      /* do stuff */
      break;
    case "second" : 
      /* do other stuff */
      break;
    case "third" : 
      /* do other stuff */
      break;
    case "four" : 
      /* do other stuff */
      break;
    default :
      console.log("Umm... I wasn't expecting that... when did I add more elements?");
  }
});
于 2012-07-08T05:50:39.213 に答える