0

在这里使用 jquery 对我有一点帮助。这是我的问题。我有一个清单

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

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

4

8 回答 8

1

问题是您很可能正在使用 .click 或 bind('click') 将 click 事件处理程序附加到元素。如果在附加事件时所有元素都存在，这很好，但是如果您创建与同一选择器匹配的新元素，它们将不会附加该事件。

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

一个委托的例子，它捕获点击事件并附加一个新元素，你可以点击它，并看到相同的事件附加到与选择器匹配的 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')是我的示例用来表示 的，但如果您不想将 id 或类放在列表中<ul>，也可以轻松使用。$('ul')

示例小提琴

于 2013-06-27T04:44:32.213 回答
1

试试这个演示

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

$('ul').on('click','a', function(){
    alert('click');
});
于 2013-06-27T04:47:44.113 回答
0

看看这个 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
})
于 2013-06-27T04:32:42.557 回答
0

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

$(document).ready(function() {
    $("ul").on("click li > a", function() {
        $(this).closest("li").remove();
    });
});
于 2013-06-27T04:36:19.680 回答
0

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

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

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

测试链接

于 2013-06-27T04:37:53.770 回答
0

好的，鉴于“.on”不符合您的要求，可能类似于：

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

$("ul").prepend($element);
于 2013-06-27T04:39:44.420 回答
0

你可以试试这个

$("ul").on("click", "a", function(e){
    e.preventDefault();
    $(this).closest('li').remove();
});
于 2013-06-27T04:44:16.743 回答
0 
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/

于 2013-06-27T04:55:05.733 回答