在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