jQuery添加元素點擊選擇父母也

我有一個問題，使用.on()附加元素。jQuery添加元素點擊選擇父母也

我試圖選擇並動態創建有能力被選中並且有div添加到他們的div。我遇到的問題是，當我選擇使用.on()的元素內的dyanmic元素時，它也會選擇父元素。我對jQuery相當陌生，所以可能有一個完全更好的解決方案。

<script type="text/javascript"> 
$(function() { 
    var wrapper = $('#wrapper'); 
    var add_row_button = $('#add_row');   

    var row_count = 0; 
    var selected_item = wrapper; 

    add_row_button.click(function() { 

     row_count++; 

     var new_element = '<div id="' + row_count + '">' + row_count + '</div>'; 

     selected_item.append(new_element); 

     $('#' + row_count).on("click", function() { 
      console.log(selected_item); 
      selected_item.removeClass("selected"); 
      selected_item = $(this); 
      selected_item.addClass("selected"); 
      console.log(selected_item); 
     }); 
    });   
});

<button id="add_row">Add row</button> 
<div id="wrapper"></div>

來源

2012-03-20 Frankie

你可以發佈一些HTML嗎？這個'row_count'和'selected_item'從哪裏來？你可以發佈他們的代碼嗎？ – Joseph 2012-03-20 01:15:25

沒問題。我剛剛發佈了我認爲您需要的內容。 – Frankie 2012-03-20 01:18:15

http://api.jquery.com/event.stopPropagation/ - 停止傳播。這會阻止事件冒泡到DOM上的父元素。 _（編輯出於語法目的）_ – Ohgodwhy 2012-03-20 01:25:50

你還沒有告訴我們您的實際HTML，但這裏的，可以爲你工作的例子。

委託事件處理的想法是，您將一個事件處理程序附加到靜態（不會來去）的父對象。子對象上的事件然後冒泡到父對象上，並且父對象上的jQuery事件處理器檢查事件的來源以查看它是否與所需的選擇器匹配。

所以，如果你對這些動態創建的事件容器是#container每個動態創建孩子得了的dynChild類的名稱，你可以掛接所有符合條件的孩子一個單擊處理程序與此標準：

<div id="container"> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
    <div class="dynChild"></div> 
</div> 

$('#container').on('click', '.dynChild', function() { 
    // handle click on a child here 
    // The this pointer will point to the element that was clicked on 
});

然後，您可以在不更改事件處理的情況下添加/刪除匹配的子對象，並且它們的點擊事件將由父對象上的此委派事件處理程序自動處理。它是簡單管理動態創建/修改頁面的更強大功能之一。

來源

2012-03-20 01:34:32 jfriend00

works!

$(function() { 

    //isolate code (optional) 
    (function() { 

     var wrapper = $('#wrapper'); 
     var addButton = $('#add_row'); 
     var row_count = 0; 
     var selectedItem; 

     //add a handler to the button 
     addButton.on('click', function() { 
      row_count++; 
      var new_element = $('<div></div>').attr('id', row_count).text(row_count); 
      wrapper.append(new_element); 
     }); 

     //add the handler to the parent for the new items 
     //so that we DON'T need to add a handler per new item basis 
     wrapper.on('click','div', function() { 
      if(typeof selectedItem !== 'undefined'){ 
       selectedItem.removeClass('selected'); 
      } 
      selectedItem = $(this); 
      selectedItem.addClass('selected'); 
     }); 
    }()); 
});

來源

2012-03-20 01:30:47 Joseph

更新了答案。我沒有注意到第一次選擇邏輯。 – Joseph 2012-03-20 01:42:04

jQuery添加元素點擊選擇父母也

回答

相關問題