jqueryを使用してhtmlでダブルクリックアクションを追加します

olにliごとにダブルクリックアクションを追加しています。コードは次のとおりです。jqueryを使用してhtmlでダブルクリックアクションを追加します

<style> 
    li:hover { 
     cursor: pointer; 
     background-color: yellow; 
    } 
    </style> 
    <script> 
     $(function() { 
      $('#myol li').dblclick(function() { 
      alert($(this).text()); 
      }); 
     }); 
     function myclick() { 
      $("#myol").append("<li>item</li>"); 
     }; 
    </script> 
</head> 
<body> 
    <ol id="myol"> 
     <li>Item 1</li> 
    </ol> 
    <button type="button" onclick="myclick()">Button</button> 
</body>

それは、ページの読み込み後に適しています。次に、ボタンをクリックしてulに新しい行を追加します。 styleは正常に機能しますが、ダブルクリック操作は追加された新しい行では機能しません。 styleのようにダブルクリックアクションを追加する方法はありますか？あるいはこれを行う別の方法がありますか？

出典

2016-05-09 Dragon

追加行にダブルクリックして作業を行うにはjquery

$('body').on('dblclick','#myol li', function() { 
      alert($(this).text()); 
      });

出典

2016-05-09 09:33:47

要素を動的に作成するため、イベント委任を使用する必要があります。通常のイベント・バインディングは、イベント・バインディング・コードの実行時に存在する要素でのみ機能します。

$('#myol').on('dblclick', "li", function() { 
    alert($(this).text()); 
});

出典

2016-05-09 09:33:08

でon()を使用してみてください、あなたはそうのようにそれを実行する必要があります。

$('#myol').on('dblclick', 'li', function() { 
    alert($(this).text()); 
});`

出典

2016-05-09 09:34:55 arzhed

あなたは変更する必要がありますあなたのイベントをバインドする方法。

今バインドする方法では、新しく追加された要素はチェックされませんが、すでに存在する要素にのみバインドされます。

できることは、jQueryのon()関数です（source）。これはイベント委任を使用します。

あなたのコードでは、既存のものをクリックすると、追加のリスト項目を追加したい

$("#myol").on("dblclick", 'li',function() { 
    alert($(this).text()); 
});

JsFiddle

出典

2016-05-09 09:39:41 Jordumus

に書き換えられます。このコードを試してみてください。

$('#myol').on('dblclick', 'li', function() { 
    $("ul").append('<li>My added text</li>'); 
});

あなたがいることを知っている必要があります：あなたはちょうど<ul>自体に<li>を追加することができ

。
HTMLで使用しているものとは異なるタイプの引用符を使用する必要があります。あなたの属性に二重引用符を使用しているので、コードを一重引用符で囲みます。

希望します。

出典

2016-05-09 09:44:46

jqueryを使用してhtmlでダブルクリックアクションを追加します

答えて

関連する問題