Question

我为li中的每个ol添加了双击操作。代码是：

  <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？或者有另一种方法可以做到这一点？

Answer 1

尝试使用on()

中的jquery

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

Answer 2

要对附加行进行双击工作，您需要这样做：

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

Answer 3

您必须更改绑定事件的方式。

现在绑定它的方式，它不会检查新添加的元素，而只会绑定那些已经存在的元素。

你可以做的是使用jQuery中的on() - 函数（source）。这使用事件委派。

您的代码将被重写为

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

JsFiddle

Answer 4

您需要使用事件委派，因为您要动态创建元素。普通事件绑定仅适用于执行事件绑定代码时存在的元素。

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

Answer 5

您希望在单击现有列表项时添加其他列表项。试试这段代码：

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

你需要知道：

您只需将<li>附加到<ul>本身即可。
您需要使用与您在HTML中使用的相反类型的引号。因此，由于您在属性中使用双引号，请使用单引号括起代码。

希望它有所帮助。

使用jquery在html中添加双击动作

5 个答案: