Estoy agregando acción de doble clic para cada li en un ol. el código es:

  <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>

Funciona bien después de cargar la página. Luego hago clic en el botón para agregar una nueva línea en ul. style funciona bien, pero la acción de doble clic no puede funcionar en la nueva línea agregada. ¿Hay alguna forma de agregar acción de doble clic como agregar style? ¿O hay otra forma de hacer esto?

1
Dragon 9 may. 2016 a las 12:31

5 respuestas

La mejor respuesta

Intente usar on() en jquery

$('body').on('dblclick','#myol li', function() {
             alert($(this).text()); 
          });  
2
Muhammed Shevil KP 9 may. 2016 a las 09:33

Tienes que cambiar la forma de vincular tu evento.

La forma en que lo vincula ahora, no comprueba los elementos recién agregados, sino que solo se vincula a aquellos que ya están allí.

Lo que puede hacer es usar la función on() de jQuery (source). Esto utiliza la delegación de eventos.

Su código se reescribirá a

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

JsFiddle

1
Jordumus 9 may. 2016 a las 09:39

Desea agregar elementos de lista adicionales al hacer clic en los existentes. Prueba este código:

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

Necesitas saber que:

  • Simplemente puede agregar el <li> al <ul> mismo.
  • Debes usar el tipo opuesto de citas que el que estás usando en tu HTML. Entonces, como está usando comillas dobles en sus atributos, rodee el código con comillas simples.

Espero que ayude.

0
user4189304user4189304 9 may. 2016 a las 09:44

Debe usar la delegación de eventos, ya que está creando los elementos dinámicamente. El enlace de evento normal solo funcionará con los elementos que están presentes en el momento de ejecutar el código de enlace de evento.

 $('#myol').on('dblclick', "li", function() {
   alert($(this).text());
 });
0
Anoop Joshi 9 may. 2016 a las 09:33

Para hacer que el doble clic funcione en la línea adjunta, debe hacerlo así:

$('#myol').on('dblclick', 'li', function() {
     alert($(this).text()); 
});`
1
arzhed 9 may. 2016 a las 09:34