在jquery中为子子节点添加事件

Question

在这里用jquery给我一点帮助。 这是我的问题。 我有一份清单

<ul>
  <li>
      <p>Name</p>
      <a href="#">Delete</a>
  </li>
</ul>

加载页面时，“删除”事件单击是在jquery中启动的。 所以现在问题，我想添加一个元素<li></li> ，其中包含上面的子项。 我使用jquery创建标签'li'包含子项，然后'prepend'到'ul'。 问题是，我不能在新项目上调用'删除'事件。 请有人帮帮我

Answer 1

问题是你最有可能使用.click或bind（'click'）将click事件处理程序附加到元素。 如果在附加事件时存在所有元素，那么这很好，如果您创建与该相同选择器匹配的新元素，则它们不会附加该事件。

您需要使用delegate（）或.on（）方法将事件附加到页面上当前的所有元素，或者在设置后附加到页面。

捕获click事件并附加新元素的委托示例，您可以单击该元素并查看相同事件是否附加到与选择器匹配的DOM的每个新部分。

$('#list').delegate('a','click',function() {
    alert('Click event fired - Adding a new element to test!');
    $('ul').append('<li><p>Name</p><a href="#">Delete</a></li>');
    return false;
});

或者使用较新的.on方法：

$('#list').on('click','a',function() {
    alert('Click event fired - Adding a new element to test!');
    $('ul').append('<li><p>Name</p><a href="#">Delete</a></li>');
    return false;
});

$('#list')是我的例子用来表示<ul> ，但如果你不想在列表中放置id或类，你可以很容易地使用$('ul') 。

示例小提琴

Answer 2

试试这个DEMO

var contentToAdd = ' <li> <p>Name</p> <a href="#">Delete</a> </li>';
$('ul').prepend(contentToAdd);

$('ul').on('click','a', function(){
    alert('click');
});

Answer 3

看看这个jQuery示例：
（ http://api.jquery.com/on/上的最后一个例子之一）

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer;
    padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <p>Click me!</p>
<span></span>
<script>
var count = 0;
$("body").on("click", "p", function(){
  $(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
</script>

</body>
</html>

这意味着在你的情况下你需要这样的东西：

$("ul").on("click", "a", function(e){
    // delete logic goes here
})

Answer 4

在UL上添加点击监听器而不是a本身。 这样，它也会自动检测新添加项目的点击次数。

$(document).ready(function() {
    $("ul").on("click li > a", function() {
        $(this).closest("li").remove();
    });
});

Answer 5

您可以使用.on（）方法来执行此操作，

.on（）方法将事件处理程序附加到jQuery对象中当前选定的元素集

$(document).on("click", "ul li a"), function(){
    //your code here
});

测试链接

Answer 6

好的，鉴于“.on”不符合您的要求，可能是这样的：

$element = $('<li><p>Name</p><a href="#">Delete</a></li>');
$element.find("a").click(function(){ 
    //call your delete function
})

$("ul").prepend($element);

Answer 7

你可以试试这个，

$("ul").on("click", "a", function(e){
    e.preventDefault();
    $(this).closest('li').remove();
});

Answer 8

Why dont you use jquery templating.
You can define a text/template and iterate over it to get your desired result.
an example:
**THIS IS YOUR SCRIPT**
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> was released in ${ReleaseYear}.</li>
</script>

**THIS IS THE JQUERY TEMPLATE**
<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>

**THIS IS YOUR HTML**
<ul id="movieList"></ul>

更多示例： http ： //blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

在jquery中为子子节点添加事件

问题描述

8 个解决方案

解决方案1
1 2013-06-27 04:44:32

解决方案2
1 已采纳 2013-06-27 04:47:44

解决方案3
0 2013-06-27 04:32:42

解决方案4
0 2013-06-27 04:36:19

解决方案5
0 2013-06-27 04:37:53

解决方案6
0 2013-06-27 04:39:44

解决方案7
0 2013-06-27 04:44:16

解决方案8
0 2013-06-27 04:55:05

在jquery中为子子节点添加事件

问题描述

8 个解决方案

解决方案1 1 2013-06-27 04:44:32

解决方案2 1 已采纳 2013-06-27 04:47:44

解决方案3 0 2013-06-27 04:32:42

解决方案4 0 2013-06-27 04:36:19

解决方案5 0 2013-06-27 04:37:53

解决方案6 0 2013-06-27 04:39:44

解决方案7 0 2013-06-27 04:44:16

解决方案8 0 2013-06-27 04:55:05

解决方案1
1 2013-06-27 04:44:32

解决方案2
1 已采纳 2013-06-27 04:47:44

解决方案3
0 2013-06-27 04:32:42

解决方案4
0 2013-06-27 04:36:19

解决方案5
0 2013-06-27 04:37:53

解决方案6
0 2013-06-27 04:39:44

解决方案7
0 2013-06-27 04:44:16

解决方案8
0 2013-06-27 04:55:05