求助-怎么阻止新生成的a元素事件冒泡

Dexlux · 发表于 2021-7-8 17:01

本帖最后由 Dexlux 于 2021-7-15 21:37 编辑

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

<body>
  <table class="table">
    <tr class="tr">
      <td><a href="JavaScript:">a元素</a></td>
    </tr>
    <tr>
      <td><a href="javascript:" class="add">增加</a></td>
    </tr>
  </table>
  <script type="text/javascript">
    $("tr").on("click", function () {
      alert('tr被点击了');
    })

    $('.add').click(function () {
      let td = $('<td><a href="JavaScript:">新添加的a</a></td>')
      $('.tr').append(td)
    })

    $('td').on('click', 'a', function (e) {
      e.stopPropagation();
    })
  </script>
</body>

</html>

ITMN · 发表于 2021-7-8 17:32

两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a', function (e) {
               alert(1)
   e.stopPropagation();
})

发现点击jquery动态新增的td 根本没触发上面这个click事件
你得注意了
想让动态添加的dom元素也触发事件你得改成document 如下这种
$(Document).on('click', 'tr td a', function (e) {
   e.stopPropagation();
});

但是这种优先级没有：$("tr").on("click", function () {
   alert('tr被点击了');
})
这个高，所以这个也得改成docment:
$(Document).on('click', 'tr', function (e) {
         alert('tr被点击了');
});

js代码全部如下：
$(Document).on('click', 'tr', function (e) {
         alert('tr被点击了');
});

$('.add').click(function () {
   let td = $('<td><a href="JavaScript:">新添加的a</a></td>')
   $('.tr').append(td)
})

$(Document).on('click', 'tr td a', function (e) {
   e.stopPropagation();
});

莫里亚蒂 · 发表于 2021-7-8 17:13

本帖最后由莫里亚蒂于 2021-7-8 17:24 编辑

加onclikc事件return flase

$('.add').click(function () {
   let td = $('<td><a style="pointer-events:none">新添加的a</a></td>')
   $('.tr').append(td)
})

$('.add').click(function () {
   let td = $('<td><a onclick="return false">新添加的a</a></td>')
   $('.tr').append(td)
})

$('.add').click(function () {
   let td = $('<td><a href="javascript:;">新添加的a</a></td>')
   $('.tr').append(td)
})

ITMN · 发表于 2021-7-8 17:36

ITMN 发表于 2021-7-8 17:32
两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a', ...

jquery里有个隐藏的坑，
动态新增的元素，一般事件并不会触发，事件需要这样写。$(document).on....
或者还有一种办法重写click

$('.tr').append(td).on('click', 'a', function(){
e.stopPropagation();
})

ITMN · 发表于 2021-7-8 17:39

莫里亚蒂发表于 2021-7-8 17:13
加onclikc事件return flase

$('.add').click(function () {

这种并不会阻止事件冒泡
你可以测下，tr事件还会发生

Dexlux · 发表于 2021-7-8 17:55

ITMN 发表于 2021-7-8 17:32
两个问题，首先jquery新增的td。未触发 29行的点击事件
比如你改成下面这个：
$('td').on('click', 'a', ...

大佬运行是运行出来了但控制台报这个错是什么意思呀

jquery.min.js:2 Uncaught TypeError: Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at e (jquery.min.js:2)
at t (jquery.min.js:2)

Dexlux · 发表于 2021-7-8 17:56

ITMN · 发表于 2021-7-8 18:03

本帖最后由 ITMN 于 2021-7-8 18:04 编辑

Dexlux 发表于 2021-7-8 17:56

document没有引号不是字符串，你贴下代码

Dexlux · 发表于 2021-7-8 18:09

ITMN 发表于 2021-7-8 18:03
document没有引号不是字符串，你贴下代码

是按您的一样的啊 Document没加引号

莫里亚蒂 · 发表于 2021-7-8 19:15

ITMN 发表于 2021-7-8 17:39
这种并不会阻止事件冒泡
你可以测下，tr事件还会发生

这跟jq的事件机制有关 append dom之后手动绑定下事件就可以了

$('.add').click(function () {
   let td = $('<td><a class="aa">新添加的a</a></td>')
   $('.tr').append(td)

   $('.aa').click(function(e){
      e.stopPropagation()
   })
})

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 求助-怎么阻止新生成的a元素事件冒泡

免费评分