點擊兒童動態內容

我在使用AJAX動態插入元素的子節點時遇到了jQuery問題。點擊兒童動態內容

所以，我有如下語句：

$('.Select-menu-outer').children().click(function() { 
    console.log("tiggered"); 
});

然而，這並不出於某種原因，當我點擊的.Select-menu-outer元素沒有任何反應的兒童。

如果我用下面的語句：

$(document).on("click", '.Select-menu-outer', function() { 
    console.log("tiggered"); 
});

它觸發，但是我想它觸發該元素的孩子。任何想法如何使用.on做到這一點？

感謝

來源

2016-07-26 Nick Maddren

立即孩子選擇>相當於.children()方法。您需要修改選擇的目標直接子元素：

$(document).on("click", '.Select-menu-outer > *', function() { 
    console.log("tiggered"); 
});

來源

2016-07-26 11:11:44

如果它是動態的內容，你必須做到以下幾點：

//This if you want a specific element within the parents' children 
$(document).on('click', '.Select-menu-outer > .Select-menu-inner', function() { 
    console.log('A .Select-menu-inner element was clicked'); 
}); 

//This if you want all the parents' children 
$(document).on('click', '.Select-menu-outer > *', function() { 
    console.log('A child element was clicked'); 
});

看到這個片段看到指定一個內部類

的好處

$(document).on('click', '.select-menu-outer > .select-menu-item', function() { 
 
    console.log('clicked %s', $(this).data('title')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="select-menu-outer"> 
 
    <li class="select-menu-item" data-title="first"> 
 
    First Item 
 
    </li> 
 
    <li class="select-menu-item" data-title="second"> 
 
    Second Item 
 
    </li> 
 
    <li class="select-menu-item" data-title="third"> 
 
    Third Item 
 
    </li> 
 
    <li class="select-menu-item-no-click"> 
 
    Can't Touch This 
 
    </li> 
 
</ul>

來源

2016-07-26 11:24:09 Lokuzt

從JQuery的on方法文檔（http://api.jquery.com/on/）：

.on(events [, selector ] [, data ], handler)

大多數瀏覽器事件泡沫，或傳播，從文檔在它們出現的所有的方式最深，最裏面的元件（事件目標）直到身體和文檔元素。

如果省略選擇符或爲null，則該事件處理程序稱爲直接或直接綁定。每次在選定元素上發生事件時，都會調用處理程序，無論它是直接發生在元素還是來自後代（內部）元素的氣泡。

提供選擇器時，事件處理程序稱爲委託。當事件直接發生在綁定元素上時，不會調用該處理程序，而只會爲與選擇器匹配的後代（內部元素）調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

從Jquery的click方法（http://api.jquery.com/click/）：

此方法是一個快捷方式。在（「點擊」，處理程序）

所以讀那些我們可以得出結論，當你通過click方法上的.Select-menu-outer =>兒童附加處理當事件直接綁定元素上發生的處理程序是不叫摘錄，但只限於後代。
所以，如果.Select-menu-outer的孩子沒有後代，那麼就沒有事件處理。

來源

2016-07-26 11:54:48

點擊兒童動態內容

回答

相關問題